使用内联img宽度而不是css

Question

HY，

我正在开发一个响应式网页，我只是想知道是否有使用内联img属性而不是css的解决方案？

以下是一个例子：

<img src="picture.jpg" height="90" width="120" alt="picture alt" />

但是移动优先css使用下一个css：

width: auto; height: auto; max-width: 80%;

结果是图片宽度是它的原始宽度。 （如果图片宽度为800px，则显示为800px宽度）

如何修复使用width和height属性？

谢谢，戴夫。

Answer 1

内联CSS应该覆盖它。

<img src="picture.jpg" style="height:90px; width:120px;" alt="picture alt" />

Answer 2

如果我理解正确，您希望有两种不同的显示器：一种用于普通计算机，一种用于移动设备。如果您使用内联CSS，那么您分配的课程将无关紧要。内联CSS将覆盖所有内容，因此除非您想使用JavaScript手动覆盖样式，否则不要使用它。

相反，请为您的图像元素指定一个类，以便我们可以使用CSS定位它们：

<img src="picture.jpg" height="90" width="120" class="ResizeableImage" alt="picture alt" />

现在，为要定位的每个屏幕宽度创建一个移动CSS类：

@media only screen and (max-width: ???px) {
    .ResizeableImage 
        { 
            //Put Mobile Styling Here 
        }
}

你的问题有点难以理解，所以我希望这是你正在寻找的。如果没有，请发表评论，我会尝试提供帮助。