twitter-bootstrap 使用媒体查询调整图像大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22873219/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Resizing images using media queries
提问by ve1jdramas
Ok so I am making a filterable portfolio with bootstrap 3 and quicksand.js, I am using quicksand to filter the portfolio. Now I had this working fine when my images were set widths and heights but when I change the width and height to 100% the sorting is weird, the images become bigger when they are sorting and this causes all kinds of glitches.
好的，所以我正在使用 bootstrap 3 和 quicksand.js 制作一个可过滤的投资组合，我正在使用 quicksand 来过滤投资组合。现在，当我的图像设置宽度和高度时，我可以正常工作，但是当我将宽度和高度更改为 100% 时，排序很奇怪，图像在排序时变得更大，这会导致各种故障。
I had to use jquery migrate to get the sorting to work because the tutorial was so old, I dont know if this will be a contributing factor to my issue.
我不得不使用 jquery migrate 来进行排序，因为教程太旧了，我不知道这是否会导致我的问题。
Here is old jsfiddlewith the issue.
这是有关该问题的旧 jsfiddle。
Here is updated fiddle, with my max height + width fix
Also you can check out this linkwhich has the images at a fixed width, the sorting looks fine but then they stack on top of each other at lower screen sizes.
您也可以查看此链接，该链接具有固定宽度的图像，排序看起来不错，但随后它们以较低的屏幕尺寸堆叠在一起。
UPDATE:Okay I have fixed the issue at desktop width by using max-width: 390px;and max-height: 390px;on my .portfolio imgclass. But now on lower resolutions (tablets etc) the images are bigger again. Would the best way to fix this be with media queries or any suggestions? I realize now that bootstrap is designed to be mobile first but I am too far in my code I believe, what do you guys suggest.
更新：好的，我已经在我的课堂上使用max-width: 390px;和解决了桌面宽度的问题。但是现在在较低的分辨率（平板电脑等）下，图像又变大了。解决此问题的最佳方法是使用媒体查询或任何建议吗？我现在意识到引导程序旨在首先移动，但我相信我的代码太远了，你们有什么建议。max-height: 390px;.portfolio img
回答by ve1jdramas
I resolved this issue by changing my portfolio img css to:
我通过将我的投资组合 img css 更改为：
.portfolio img {
max-width: 100%;
width: 100%;
height: auto !important;
}
And used media queries to limit the width and height on the image at each viewport:
并使用媒体查询来限制每个视口图像的宽度和高度：
@media (max-width:767px) {
.portfolio img {
max-width: 100%;
max-height: 100%;
}
}
@media (min-width:768px) {
.portfolio img {
max-width: 240px;
max-height: 240px;
}
}
@media (min-width:992px) {
.portfolio img {
max-width: 314px;
max-height: 314px;
}
}
@media (min-width:1200px) {
.portfolio img {
max-width: 380px;
max-height: 380px;
}
}
