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

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时，效果会不太好。我宁愿以原始尺寸显示图像。 （例如400px）

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

当设备/浏览器大于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; }
}