1

レスポンシブ ギャラリーを作成していますが、クライアントから横長と縦長のさまざまなサイズの画像が送られてきました。

cssを使用して、インライン画像を取得し、アスペクト比を同じに保つ方法を作成しようとしています。

ここに私が作成したコードペンへのリンクがあります。自由に編集してください。

http://codepen.io/daugaard47/pen/mpado

ボックス内の画像は 3137 x 4012 です。クラス max-img-border を使用して、grid_3 内で画像の幅を 100% に保ちます。

次に、高さを同じ縦横比に保ちたいので、画像は押しつぶされずに隠されます。たとえば、ツリーの上部は、クラス max-img-border の overflow:hidden コマンドによって非表示になります。

どうすればこれを達成できますか？

また、これを達成できる場合、position:center center を追加する方法はありますか?

コードペンを見たくない場合のコードは次のとおりです。

HTML

<body>

<div class="tree">

  <div class="grid_3">
    <a class="fancybox" rel="gallery1" href="http://upload.wikimedia.org/wikipedia/commons/f/fe/Tree_at_Golf_Course.JPG" title="Tree removal">
      <img src="http://upload.wikimedia.org/wikipedia/commons/f/fe/Tree_at_Golf_Course.JPG" alt="Tree removal" class="max-img-border">
    </a>
    <h5>Tree Removal</h5>
  </div>

</div>

</body>

そして、ここにcssがあります

CSS

body{
    background-color:#1f1f1f;
}

.tree{
    margin:150px auto;
}

.grid_3 {
    width:260px;
    margin:0 20px;
    float:left;
    display:inline;
}

.max-img-border {
    width:100%;
    height:auto;
    max-height:180px;
    border:solid 2px #FFFFFF;
    margin-bottom:10px;
    overflow:hidden;
    display:inline-block; 
}

h5 {
    margin:0 0 10px 0;
    padding:0;
    font-size:17px;
    line-height:19px;
    color:#FFFFFF;
    font-weight:700;
    text-shadow: 0 2px 2px rgba(0, 0, 0, 0.75);
    text-align:center;
}
4

1 に答える 1