在 window 调整大小时自动调整图像大小

Question

我正在显示一些 input type=image。图像按我希望的方式显示在更大的 window 中，但是当 window 缩小时，就像在 phone 上一样，images/row 会发生变化，但不会改变每个图像的大小。我发布了一个类似的问题，并被告知使用 display:inline-flex 但是当我尝试这样做时，在这种情况下，较大 window 中的布局没有按我想要的那样间隔。

所以我试图让所有图像都像 window 大小一样缩小，但同时保持它们所在的布局 - 均匀分布在行中。

还有一个颜色名称居中的小问题。我用在第一个上，它有效。是这样做的方法还是可以更改类之一来做到这一点？

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

据我了解，您希望响应式图像的缩放与用户 window 的大小相关。

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

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

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

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>

这表示 "if the window is less than 600px width, images with the your-image class should have a different width"。

IMO CSS 解决方案非常干净，但如果您想使用 Javascript，您可以这样做：

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

window.addEventListener('resize', foo);

在 window 调整大小时自动调整图像大小

Resize images automatically on window resize

html

css

image

shrink