MENU

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

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

 

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

コメント

コメントする

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

目次