決まった枠内で縦横真ん中　レスポンシブデザイン

2021年2月3日

サイズがバラバラの画像を決まった枠内の中で縦横真ん中に配置するcss。

レスポンシブなので決まった枠も縦横可変。

.styling {
  width: 100%;
  margin: 0 auto;
}
.styling .img {
  position: relative;
  width: 100%;
  margin-bottom: 20px;
  background-color: #eee;
}
.styling .img:before {
  content:"";
  display: block;
  padding-top: 100%;
}
.styling .img .img-inner {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.styling .img .img-inner img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: block;
  width:auto;
  height:auto;
  max-width:100%;
  max-height:100%;
  margin: auto;
}

HTML

<div class="box">
      <div class="img">
      <div class="img-inner">
       <a href=""><img src="images.jpg" alt=""></a>
      </div>
      </div>
</div>

よかったらシェアしてね！