Question

我正在尝试让所有图片都有max-width: 400px;，同时又能响应，即移动设备友好。

以下样式确实使图像具有响应性，但max-width: 100%;使图像的大小变得比想要的大得多，因此这不是一个合适的解决方案。

max-width: 100%;
Width: auto;
height: auto;
border: 1px #DFDFDF solid; /* Just to make the image look nicer */

我需要的是这些方面（但反应灵敏）：

max-width: 400px;
width: auto;
height: auto;
border: 1px #DFDFDF solid; /* Just to make the image look nicer */

我尝试了很多不同的东西，但我无法让它发挥作用。

感谢您的帮助！

Answer 1

默认情况下，您的图片希望是父图片的宽度，但您希望将该图片的宽度设置为不超过400px。

max-width: 400px;
width: 100%;
height: auto;
border: 1px #DFDFDF solid; /* Just to make the image look nicer */

为了更深入一点并拥有更多控制权，您可以将其拆分并使用媒体查询来定位您的移动显示器：

// Desktop
.your-img {
    max-width:400px;
    width:100%;
    height:auto;
    border:1px solid #dfdfdf;
}

// Mobile
@media (max-width:768px) {
    .your-img {
        width:auto;     // Get the original width of the image
        max-width:100%; // So the image can only be as wide as the device max
        display:block;  // Image becomes a block element
        margin:0 auto;  // Centre image if smaller than device width
    }
}

CSS - 响应式图像大小

1 个答案: