divコンテンツの固定サイズを与える方法

Question

divの幅のスタイルは65％です。

は、それから私は、任意のCSSスタイル属性なしでこのdiv内imgを置くが、65％以上が、本img幅とdivフレームを側を外に移動します。

imgの幅をCSSスタイルなしで調整するにはどうすればよいですか？

<div style="width: 65%"> 
 
    <img src="assets/images/Orion_Nebula_-_Hubble_2006_mosaic_edit_1.jpg"> 
 
    </div>

Answer 1

これを試してみてください。

img{ 
    width:100%; 
    height: auto; 
} 

Answer 2

背景画像

<div class="product-image" style="width: 65%; background-image:url(assets/images/Orion_Nebula_-_Hubble_2006_mosaic_edit_1.jpg');"></div> 

Answer 3

として設定されていないあなたが何をしたいのか確認してください、あなたは明確だろうか？

どのような場合でも、あなたの見方によってはできますが、できません。ほとんどの画像はピクセル 'グリッド'で、何をしていてもピクセル単位でサイズが設定されます。

あなたはHTMLでサイズを設定することができます

<img src="assets/images/Orion_Nebula_-_Hubble_2006_mosaic_edit_1.jpg" height="42" width="42"> 

をしかし、これは実際にはそれを一緒に押したり、それを伸ばし、画像のサイズを変更しませんので、あなたの品質が低下します。 （CSSと同じです）そして最近、これはこれを行う悪い方法とみなされています。

イメージを直接ターゲティングできない場合は、コンテナの子としてイメージをターゲティングするのが効果的でしょうか？

div img { 
width: 100px; 
height 100px; 
} 

本当に、あなたが何をしたいのか、なぜあなたの限界が彼らのものなのかをもっと説明する必要があります。

Answer 4

！あなたのdivタグスタイル内で重要なのを使用してください。 ！重要なマークが付けられたCSSルールは、後のルールよりも優先されます。通常、CSSではルールが上から下に向かって動作するので、スタイルシートまたはセカンダリスタイルシートの下の要素に新しいスタイルを割り当てた場合は、後のルールが優先されます。 ！importantは、このルールが優先されることを保証します。あなたのケースでは例えば

：以降のルールは無視され、それはdiv要素だ後のimgスタイルがかかりますので

<div style="width: 65% !important"> 
    <img src="assets/images/Orion_Nebula_-_Hubble_2006_mosaic_edit_1.jpg"> 
</div> 

最初のルールは今の優先順位を持っています。

これが役立つかどうか教えてください。

Answer 5

CSSは、 これはdivの幅を行います

.image{ 
    width: 65%; 
} 

.image img{ 
    width: 100%; 
} 

HTML

<div class="image"> 
    <img src="assets/images/Orion_Nebula_-_Hubble_2006_mosaic_edit_1.jpg"> 
</div> 

CSSを使用してみた画像には適用されませんので、あなたのイメージは、あなたのdivその後、大きいですページと画像の65％の幅はdiv幅の100％になります。