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

Question

我有以下：

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

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

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

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

当设备浏览器分辨率大于 1040 像素时，我尝试过.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; }
}