在窗口調整大小時自動調整圖像大小

我正在顯示一些輸入類型=圖像。圖像按照我希望它們在更大的窗口中顯示，但當窗口縮小時（如在手機上）時，圖像/行會更改，但不會更改每個圖像的大小。我發佈了一個類似的問題，並被告知要使用display：inline-flex，但是當我嘗試在這種情況下，較大窗口中的佈局不按我想要的間距排列。在窗口調整大小時自動調整圖像大小

所以我試圖讓所有的圖像縮小窗口大小，但也保持他們的佈局 - 行間均勻間隔。

而且還有一個小心的問題是使顏色名稱居中。我用第一個，它的工作原理。這是做到這一點的方法，還是可以改變其中一個類來做到這一點？

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>

來源

2016-12-14 user3052443

對於一個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);

來源

2016-12-14 00:34:51 Ben

據我瞭解，你想有一個成長和收縮相關的用戶窗口的大小響應圖像。

我不確定是否有一種簡單的方法可以在普通的css中執行此操作，但是Bootstrap（謝天謝地）有這個內置的！

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

簡單的「IMG響應」類添加到您的圖像，它將成爲響應&規模的任何父元素它在大小。

Bootstrap responsive image documentation

來源

2016-12-14 00:30:10

在窗口調整大小時自動調整圖像大小

回答

相關問題