幅を定義して最大幅を使用する方法

Question

ウィンドウサイズが小さくなるにつれて画像を小さくしたいと考えています。

しかし、「max-width」が「width」を上書きするため、これら2つのイメージのサイズを幅で定義する必要があります。画像のサイズを変更するには、「最大幅」を使用する必要があります。しかし、私は幅と最大幅の両方を使用し、その幅が定義され、サイズが変更されている左側の2つの画像がありますか？私は他の2人と何が間違っていますか？ helpme123 @

img { 
 
    width: 100%; 
 
    height: auto; 
 
    width: auto\9; 
 
} 
 
/* css for the two larger images on the left-hand side*/ 
 

 
#imageleft { 
 
    display: inline-block; 
 
    height: 30px; 
 
} 
 
/* css for the two smaller images on the right-hand side*/ 
 

 
#imageright { 
 
    display: inline-block; 
 
    width: 50px; 
 
    height: 100px; 
 
}

<!-- large images to left --> 
 
<div id="imageleft"> 
 
    <a href="index.html"> 
 
    <img src="images/photo-1464375117522-1311d6a5b81f.jpeg" alt="Guitar image" style="max-width:100%; width:600px;height:400px"> 
 
    </a> 
 
    <a href="index.html"> 
 
    <img src="images/photo-1470020618177-f49a96241ae7.jpeg" alt="Fire breather" style="max-width:100%; width: 300px;height: 400px"> 
 
    </a> 
 
</div> 
 

 
<!-- small images to the right --> 
 
<div id="imageright"> 
 
    <a href="index.html"> 
 
    <img src="images/photo-1472653431158-6364773b2a56.jpeg" alt="festival" style=" max-width: 100%; height: 200px"> 
 
    </a> 
 
    <a href="index.html"> 
 
    <img src="images/photo-1473396413399-6717ef7c4093.jpeg" alt="stage view" style="width:291px; max-width: 100%;height: 196px"> 
 
    </a> 
 
</div>

Answer 1

私は本当にあなたが達成することを望むレイアウトの種類を取得できませんでした。投稿を変更してその例を教えてください。あなたは要素の親に幅相対（またはビューポートまたは現在のフォントサイズやベースフォントサイズ）を与えているので、

Answer 2

あなたが一緒にwidthとmax-widthを使用し、それが通常だが、あなたもしたいです絶対幅を明示的に指定する必要があります。

実施例：

div { 
 
width: 90%; 
 
padding: 12px; 
 
} 
 

 
.parent { 
 
max-width: 1000px; 
 
background-color: rgb(255,0,0); 
 
} 
 

 
.child { 
 
max-width: 600px; 
 
background-color: rgb(255,255,0); 
 
} 
 

 
.grandchild { 
 
max-width: 400px; 
 
height: 100px; 
 
background-color: rgb(0,0,255); 
 
}

<div class="parent"> 
 
<div class="child"> 
 
<div class="grandchild"> 
 
</div> 
 
</div> 
 
</div>

あなたがフル画面で例を実行すると、ウィンドウのサイズを縮小し、その後徐々にそれを育てる場合は、div要素ごといることがわかります彼らの親に相対的に広げる...彼らがmax-widthに達するまで、彼らは広がりを止める。