responsive-design - 流体图像上的翻转淡入淡出

Question

我正在创建一个响应式站点，其中包含一个由流体图像组成的画廊。为此，我必须使用 css img {max-width: 100%;}。我还想要悬停时的淡入淡出效果。

有人对此有解决方案吗？

到目前为止，我尝试过的所有解决方案都不适用于 css img {max-width: 100%;}

非常感谢您的帮助！

Answer 1

定义图像宽度及其最大宽度。它必须以像素或 em 为单位。您不需要在 %'s 中保留 max-width 或 min-width。浏览器从其原始宽度或高度值呈现。作为

这是例如。

img{
    width:50%;
    height:30%;
    max-width:300px;
    min-height:100px;
    }

并且每个图像都可以灵活地使用视口。