親要素よりもサイズの大きい画像を上下左右中央に配置したい

Question

https://jsfiddle.net/c9td9d8q/

↑実現したいことのサンプルとして transform と絶対配置で再現しています。

赤い部分が親要素の矩形、グレーははみだした画像の色です。
（実際には親要素に overflow: hidden; をかけてはみだした部分は見えないようにします）

transform のプロパティを使ってパララックスで画像を動かしたいため、
可能であれば初期値は translate3d(0, 0, 0); にしておきたいです。

何かいい方法はありますでしょうか。

<div class="image">
  <img src="//placehold.it/200" alt="">
</div>

.image {
  width: 100px;
  height: 100px;
  position: relative;
  background: #c33;
}

img {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
}

Answer 1

なにも考えずにflexで

body {
  margin: 0;
  padding: 80px;
}

.image {
  width: 100px;
  height: 100px;
  /*position: relative;*/
  background: #c33;
  display:flex;
  justify-content:center;
  align-items:center;
}

img {
  display: block;
  /*position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);*/
  opacity: 0.5;
}

Answer 2

flexで調節してみました。

.image {
  width: 100px;
  height: 100px;
  /* position: relative; */
  background: #c33;
  display: flex;
  justify-content: center;
  align-items: center;
}

img {
  /*
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  */
  opacity: 0.5;
  flex-shrink: 0;
}

Comments

[sousuke]

もろかぶりしました…m(_ _;)m

[Atsushi_Okumura]

ですね･･･(・・;)

[machine_machine]

お二方ともありがとうございました。

「ご回答いただいた時間が早いほうをベストアンサーに」と思いましたが時間もまったく同じなため、
`flex-shrink: 0;` によって画像以外でも対応ができたこちらを選ばせていただきます。

Answer 3

backgroundで敷いてみるのはどうでしょうか（fiddle改）。

/* 中の<img>タグは撤去 */
.image {
  width: 100px;
  height: 100px;
  background: url(//placehold.it/200) 50% 50%;
}