divの途中に画像を配置し、ウィンドウが小さくなりすぎると画像のサイズを変更します

Question

divの中央に配置する必要がある画像があります。最大幅は700pxです。

ウィンドウが狭くなり、divがイメージの幅よりも小さくなると、イメージも小さくなります。以下フィドルで

私は別に両方の機能を追加しました：https://jsfiddle.net/rb1hyxh2/を、私はそれらを結合する方法を見つけることができません（例えばマージン：0自動;ここではインラインブロックでは動作しません...）

<div class="header1"><div class="header2"> 
    <img src="http://wp.patheos.com.s3.amazonaws.com/blogs/faithwalkers/files/2013/03/bigstock-Test-word-on-white-keyboard-27134336.jpg" class="header3"> 
</div></div> 

<div class="header1"> 
    <img src="http://wp.patheos.com.s3.amazonaws.com/blogs/faithwalkers/files/2013/03/bigstock-Test-word-on-white-keyboard-27134336.jpg" class="headerA"> 
</div> 


.header1{ 
    padding-bottom: 16px; 
    background-color: red; 
    max-width: 700px; 
    margin-bottom: 30px; 
} 

.header2{ 
    background-color: blue; 
    display:inline-block; 
} 
.header3{ 
    width: 100%; 
} 

.headerA{ 
    display:block; 
    margin:auto; 
} 

Answer 1

単純な解決策は、headerAにの最大幅を画像の幅に設定し、の幅を100％にすることです。 divが500pxより小さい場合、divのサイズはそのようになります。 CSS

で

Codepen

HTML

<div class="header1"> 
    <img src="http://wp.patheos.com.s3.amazonaws.com/blogs/faithwalkers/files/2013/03/bigstock-Test-word-on-white-keyboard-27134336.jpg" class="headerA" /> 
</div> 

CSS

.header1 { 
    padding-bottom: 16px; 
    background-color: red; 
    max-width: 700px; 
    margin-bottom: 30px; 
} 

.headerA { 
    display: block; 
    margin: auto; 
    max-width: 500px; 
    width: 100%; 
} 

追加された行210

max-width: 500px; 
    width: 100%; 

Answer 2

あなたのcssファイルに

img { 
    width: 100%; /* or any other value < 100% will stay within bounds */ 
} 

を追加する場合は、あなたのイメージは、あなたが持っている赤色のdivのの範囲内にとどまります。それはあなたが望んだことですか？ここで

Answer 3

はフィドルhttps://jsfiddle.net/rb1hyxh2/5/

<script> 
var imgs = document.querySelectorAll('.headerA'); 
for (var i = 0, element; element = imgs[i]; i++) { 
     var w = imgs[i].naturalWidth; 
    imgs[i].style.maxWidth = w+"px"; 
} 
</script> 

を参照して、元の幅の最大幅のクラス.headerAですべての画像を設定するためのjavscriptバージョンである私は、これはあなたがhttps://jsfiddle.net/rb1hyxh2/3/

探しているものだと思います画像にwidth: 100%;とmax-width: 500px;を追加しました。これはdivを100％に設定しますが、divが500pxより大きい場合は設定しません。

.headerA { 
    display: block; 
    margin: auto; 
    width: 100%; 
    max-width: 500px; 
}