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

【问题标题】：Resize images automatically on window resize在窗口调整大小时自动调整图像大小
【发布时间】：2017-04-29 04:40:31
【问题描述】：

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

【问题讨论】：

标签： html css image shrink

【解决方案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);

【讨论】：

【解决方案2】：

据我了解，您希望拥有与用户窗口大小相关的响应式图像。

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

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

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

Bootstrap responsive image documentation

【讨论】：