ウィンドウのサイズを自動的に変更resize

Question

いくつかの入力タイプ= imageを表示しています。イメージは大きなウィンドウで表示するように表示されますが、電話のようにウィンドウが縮小すると、イメージ/行は変更されますが、各イメージのサイズは変更されません。私は同様の質問を掲示し、display：inline-flexを使用するように言われましたが、この場合、大きなウィンドウのレイアウトは必要なだけ間隔を空けません。

私はすべての画像をウィンドウのサイズに合わせて縮小しようとしていますが、レイアウトが均等に並んでいます。

また、色の名前をセンタリングするという小さな問題もあります。私は最初のもので使いました。それはそれを行う方法ですか、それを行うためにクラスの1つを変更することはできますか？私の知る限り理解し

jsfiddle

.imgStr {display:inline-block; } 
    .imgInput {width:100px; max-width:100px;} 
    img{border:solid 1px #9a9a9a; margin:10px;} 
    .selected{ box-shadow:0px 12px 22px 1px #333 } 

    .transition { 
    -webkit-transform: scale(1.6); 
    -moz-transform: scale(1.6); 
    -o-transform: scale(1.6); 
    transform: scale(1.6); 
    } 
    #enlarge { 
    -webkit-transition: all .4s ease-in-out; 
    -moz-transition: all .4s ease-in-out; 
    -o-transition: all .4s ease-in-out; 
    -ms-transition: all .4s ease-in-out; 
    } 
    #enlarge { margin:0px; } 


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

    <div class="imgStr shadow"><center><input id="enlarge" class="imgInput" name="img_back_group" type="image" src="//dummyimage.com/700x350"/><br/>Beige</center></div> 

    <div class="imgStr shadow"><input id="enlarge" class="imgInput" name="img_back_group" type="image" src="//dummyimage.com/700x350"/><br/>Black</div> 

    <div class="imgStr shadow"><input id="enlarge" class="imgInput" name="img_back_group" type="image" src="//dummyimage.com/700x350"/><br />Blue</div> 

    <div class="imgStr shadow"><input id="enlarge" class="imgInput" name="img_back_group" type="image" src="//dummyimage.com/700x350"/><br/>Navy</div> 

    <div class="imgStr shadow"><input id="enlarge" class="imgInput" name="img_back_group" type="image" src="//dummyimage.com/700x350"/><br/>Baby Blue</div> 

    <div class="imgStr shadow"><input id="enlarge" class="imgInput" name="img_back_group" type="image" src="//dummyimage.com/700x350"/><br/>Chocolate</div> 

    <div class="imgStr shadow"><input id="enlarge" class="imgInput" name="img_back_group" type="image" src="//dummyimage.com/700x350"/><br/>Dark Grey</div> 

Answer 1

をCSSの唯一の解決策について、あなたは@media-query（https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries）を探している：

<style> 
.your-image { 
    transition: all 0.5s ease; 
    width: 200px; 
} 

@media (max-width: 600px) { 
    .your-image { 
    width: 100px; 
    } 
} 
</style> 

ウィンドウ場合、これは」言いますが600ピクセル幅未満の場合、your-imageクラスの画像の幅は異なるはずです。 "

---

IMO CSSのソリューションはかなりきれいですが、あなたはJavascriptを使用したい場合は、あなたが何かを行うことができます：

function foo() { 
    ...do your resizing here... 
} 

window.addEventListener('resize', foo); 

を

Answer 2

、あなたが成長し、ユーザーがウィンドウサイズに関連シュリンク応答画像を持っていると思います。

通常のCSSでこれを行う簡単な方法はありませんが、ブートストラップ（ありがたいことに）に組み込まれています！

<img src="foo.jpg" class="img-responsive"> 

は単に、それはそれはに何でも親要素の大きさに応じて&規模になるだろう、あなたのイメージに「IMG応答性」クラスを追加します。

Bootstrap responsive image documentation