Question

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

Answer 1

据我所知，您希望拥有与用户窗口大小相关的增长和缩小的响应式图像。

我不确定在普通的CSS中有一种简单的方法可以做到这一点但是Bootstrap（谢天谢地）内置了这个！

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

只需将“img-responsive”类添加到您的图片中，它就会变得敏感。缩放到它所在的任何父元素的大小。

Bootstrap responsive image documentation

Answer 2

对于仅限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>

这表示“如果窗口宽度小于600px，则your-image类的图像应具有不同的宽度”。

IMO CSS解决方案很干净，但是如果你想使用Javascript，你可以这样做：

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

window.addEventListener('resize', foo);

在窗口调整大小

2 个答案: