我正在显示一些输入类型=图像。图像按照我希望它们在更大的窗口中显示,但当窗口缩小时(如在手机上)时,图像/行会更改,但不会更改每个图像的大小。我发布了一个类似的问题,并被告知要使用display:inline-flex,但是当我尝试在这种情况下,较大窗口中的布局不按我想要的间距排列。在窗口调整大小时自动调整图像大小
所以我试图让所有的图像缩小窗口大小,但也保持他们的布局 - 行间均匀间隔。
而且还有一个小心的问题是使颜色名称居中。我用第一个,它的工作原理。这是做到这一点的方法,还是可以改变其中一个类来做到这一点?
.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>