2

流動的なレイアウトで div とネストされた img を使用して基本的なヘッダーを作成しています。私はこれについて少し錆びており、div にネストされた画像が親 div よりも小さくなるポイントにスケーリングせずにスケーリングする方法を理解することはできません。

編集：画像を圧迫するため、min-heightの使用が機能しないことを示すコードペンリンクを更新しました

HTML:

<div class="container">
  <div class="item half">
    <p>
      Some text
    </p>
  </div>
  <div class="item half">
    <img src="http://dummyimage.com/hd1080" class="full-width">
  </div>
</div>

CSS:

.container{
    margin: 0 auto;
    max-width: 1920px;
}

.item{
    height: 300px;
    float:left;
    overflow: hidden;
    background-color: gray;
}

.half{
    width: 50%
}

.full-width{
    max-width: 100%;
}

そして、何が起こっているのかを簡単に説明します。 ここに画像の説明を入力

そして、私がしたいことの例：

編集:ここの画像は圧縮されていないことに注意してください。これは、画像の最小高さがその親 div と同じになるように設定した場合に発生することです。しかし、オーバーフローは隠されています。また、画像が切り取られても気にしないこともわかります。 ここに画像の説明を入力

どんな助けでも感謝します。

4

2 に答える 2

2

div.item の高さに等しい min-height を画像 CSS に追加できます

img {
    max-width:100%;
    min-height:300px;
}
于 2015-10-06T14:28:32.500 に答える
0

このスレッドで私が望んでいた解決策を見つけることができました。私が探していた機能はobject-fit.

私は次の解決策を使用しました：

img{
    min-height: 100%;
    object-fit: cover;
}

編集: このプロパティは、Firefox、Chrome、および Opera でのみ適切にサポートされていることがすぐにわかりました。このポリフィルを使用して、Safari および IE でこれを修正します。

于 2015-10-06T20:57:55.223 に答える