web-dev-qa-db-ja.com

CSSはアスペクト比を維持しながらビューポートに合うようにいくつかの画像を拡大縮小します

アルバムのすべての画像を1ページに表示するギャラリーを作成しています： Big Picture style ：

全体像とは異なり、コンテナの幅に合わせて画像を比例的に拡大縮小したいdiv（.section-images、これはmargin: auto 2em;に設定されているため、その幅は、ユーザーのブラウザの幅から2*2em）をできるだけ引いた値になり、ビューポートの高さの90％を超えないようにします。

ご想像のとおり、幅に合わせて拡大縮小した場合の400x600縦向きの写真は、画面に画像全体が表示されないほど長くなるため、幅の拡大縮小を高さの90％以下に制限する必要があります。

<section class="section-images">
    <div class="image-box">
        <div class="image-large">
            <a href="#"><img foo1></a>
        </div>
        <div class="image-description">
          blabla1
        </div>
        ... MORE IMAGES WITH DESCRIPTONS ...
    </div>
    etc
</section>

私が.image-descriptionを持っている各画像の下で、これの高さは異なります。

重要なのは、横向きか縦向きかに関係なく、常に単一の画像（つまり.image-large）がビューポートに収まることです。

可能な場合はCSSのみを使用し、CSSが使用できない場合はJavaScriptのみを使用してこれを実行します。

cssimagescaleaspect-ratio
17
MindOverflow

ソリューション：（理解と操作を簡単にするために、ほとんどのコンテナを削除しました）

html,
body,
.section-images {
  height: 100%;
  margin: 0;
}
.section-images {
  margin: auto 2em;
  text-align: center;
}
img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 90%;
  margin: 20px auto;
}
<section class="section-images">
  <a href="#"><img src="http://i.imgur.com/hMRnvUx.jpg" /></a>
  <div class="image-description">blabla3<br/>more blablah<br/>and more blablah</div>
  <a href="#"><img src="http://i.imgur.com/lBuIEDh.jpg" /></a>
  <div class="image-description">blabla2</div>
  <a href="#"><img src="http://i.imgur.com/k8BtMvj.jpgg" /></a>
  <div class="image-description">blabla3<br/>more blablah<br/>and more blablah</div>
</section>

説明：

このソリューションは、パーセンテージのサイズ（幅と高さ）が親要素のサイズに相対的であるという事実に基づいています。

.section-imagesが<body>の直接の子であることを考えると、次のように設定します。

html, body, .section-images {
    width:100%;
    height:100%;
    margin:0;
}

したがって、画像のdirect parentはviewport sizeと等しくなります。

次に、以下を使用して画像のサイズを簡単に設定できます。

img{
    width:auto;
    height:auto;
    max-width:100%;
    max-height:90%;
}

画像は決して超えないアスペクト比を維持しながら、ビューポートの幅が100％、高さが90％になります。そして、彼らは文書の流れにとどまります。

28
web-tiki

IE9 +のhtml, bodyを変更せずに、ビューポートユニットを使用してこれを行うこともできます。

img {
    width:auto;
    height:auto;
    max-width:100%;
    max-height:90vh;
}
10
DonutReply

コンテナの高さを設定section-images明示的に、そのoverflowをhiddenに設定します。

0
Nick Salloum