ガラ

ここからはじめよう

2021.02.03
CSS

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

サイズがバラバラの画像を決まった枠内の中で縦横真ん中に配置する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>

 

お勧めの記事

過去の記事