在响应式网页中将图像恢复为原始大小

Question

我有以下内容：

<style>
.some_photos { width: 358px; }
@media only screen and (min-width: 1040px)
{
.some_photos { width: 700px; }
}
</style>

当设备/浏览器的屏幕宽度大于 1040px 时，我需要.some_photos调整为原始图像大小，因为在某些情况下，照片的物理宽度可能不是 700px。照片不会小于 358px，但是当一些 400px 的照片调整为 700px 时，它看起来不是很好。我宁愿以原始大小显示图像。(例如 400 像素(

此样式表用于在库中显示图像的脚本中。当设备/浏览器分辨率为 1040 像素或更高时，大于 700 像素的图像可能不会显示大于 700 像素。

当设备/浏览器大于 1040px 时，我似乎找不到将图像大小调整为原始大小的 CSS 解决方案。

当设备浏览器分辨率大于 1040px 时，我已经尝试.some_photos { max-width:100%; height:auto; }，但这不起作用。

Answer 1

你试过吗：

.some_photos 
{ 
width: auto;
height: auto; 
}

Answer 2

我根据您的需求描述尝试过这个

.some_photos { width: 358px; }
@media only screen and (min-width: 1040px)
{
.some_photos { width: auto; max-width: 700px; }
}