Question

我有以下img标记，它位于具有30像素水平填充的容器内。因此，如果屏幕宽度> = 670像素，则设计为显示640像素宽的图像，否则为320像素宽的图像：

<img srcset="TestImage320.png 320w, TestImage640.png 640w"
     sizes="(max-width: 669px) 320px, 640px"
     src="TestImage320.png">

然而，640像素图像只是320像素图像的手动放大版本。是否可以在不创建（并要求用户下载）640像素图像的情况下实现相同的效果？

基本上，我当前的方法根据可用宽度选择src="TestImage320.png"和src="TestImage640.png"值。相反，我想保留src="TestImage320.png"并在style="width: 320px"和style="width: 640px"之间进行选择。我怎样才能达到这个目标（或等效的东西）？

Answer 1

如果您尝试放大图片，它看起来会很糟糕。你可以更好地缩小尺寸并保持良好的质量。

我只会包含640px版本。抛出一个max-width: 640px; width: 100%;并观察它完美缩小。

Answer 2

除非您非常担心加载时间，否则通常最好使用您需要的最大图像（在您的情况下为640px），然后将其缩小到320px。请记住视网膜显示器的流行，建议您将图像的分辨率提高一倍，使其在这些显示器上看起来仍然很好。但同样这是一个加载时间与图像质量问题，虽然1280像素的图像不应该是一个超级巨大的文件。

Answer 3

在图像上使用此样式，它将根据宽度进行缩放并保持完整性。

.imageClass{  
width:100%
height:auto;
float:left;
}

如果你需要它保持一定的高度，这将根据身高保持完整性。

.imageClass{  
width:auto;
height:100%;
float:left;
}

Answer 4

文件HTML：

<div class="text-img">
    <img src="text.jpg" alt="text" title="text" />
</div>

文件CSS：

.text-img {width:100%;max-width:640px;overflow:hidden;}
.text-img img {min-height:100%;}

如何响应缩放单个图像文件？

4 个答案: