使用媒体查询调整图片大小 [英] Resizing images using media queries

问题描述

好，所以我使用bootstrap 3和quicksand.js制作一个可过滤组合，我使用quicksand过滤投资组合。现在我的工作正常，当我的图像设置宽度和高度，但是当我将宽度和高度更改为100％排序很奇怪，图像变得更大，当他们排序，这导致各种毛刺。

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.

我不得不使用jquery migrate来使排序工作，因为教程太旧了，我不知道这是否会对我的问题起作用。

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.

这是旧的jsfiddle 与问题。

这里是更新的小提琴，我的最大高度+宽度修正

此外，您也可以查看此链接其中有固定宽度的图像，排序看起来不错，但是它们在较低的屏幕尺寸上彼此堆叠。

Also you can check out this link which has the images at a fixed width, the sorting looks fine but then they stack on top of each other at lower screen sizes.

更新： 好，我已通过使用 max-width：390px; 和 max-height：390px; 在我的 .portfolio img 类。但现在在较低的分辨率（平板电脑等）的图像又大了。最好的方法来解决这个问题与媒体查询或任何建议？我现在知道bootstrap是设计为移动的第一，但我在我的代码太远我相信，你们建议什么。

UPDATE: Okay I have fixed the issue at desktop width by using max-width: 390px; and max-height: 390px; on my .portfolio img class. 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.

推荐答案

我通过将我的投资组合img css更改为以下内容解决了这个问题：

I resolved this issue by changing my portfolio img css to:

.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;
    }
}

http://jsfiddle.net/uv634/2/

这篇关于使用媒体查询调整图片大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！