在窗口调整大小时自动调整图像大小

问题描述：

我正在显示一些输入类型=图像。图像按照我希望它们在更大的窗口中显示，但当窗口缩小时（如在手机上）时，图像/行会更改，但不会更改每个图像的大小。我发布了一个类似的问题，并被告知要使用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>

答

对于一个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);

答

据我了解，你想有一个成长和收缩相关的用户窗口的大小响应图像。

我不确定是否有一种简单的方法可以在普通的css中执行此操作，但是Bootstrap（谢天谢地）有这个内置的！

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

简单的“IMG响应”类添加到您的图像，它将成为响应&规模的任何父元素它在大小。

Bootstrap responsive image documentation

在窗口调整大小时自动调整图像大小

相关推荐