如何将图像的大小设置为屏幕宽度的100%，但只有当<1024 px

How to size an image to be 100% width of the screen, but only if <1024 px

本文关键字：px 1024 100% 图像 设置 屏幕      更新时间：2023-09-26

我想在网站上放一张图片。我希望它不是一个背景图像，而是一个正常的图像，我以后可以用它来进行悬停和"悬停在某个区域，屏幕上发生变化"之类的交互。

我想做的是使这个图像的浏览区域的100%宽度，但只有当屏幕小于1024px。如果屏幕更大，那么我希望图像正好是1024px宽。

你会怎么做?在某个地方，我读到CSS3可以自动设置背景宽度以适应浏览器窗口，但我认为通过使用背景图像，我不能在图像上进行交互技巧。但我从来没有做过互动技巧，所以也许有可能。

通过交互技巧，我的意思是如果鼠标指针在一个多边形区域上，那么div或图像就会改变或出现在某个地方。你能告诉我在哪里可以读到这种技术吗?它是怎么叫的?

我没有JavaScript的经验，我只使用预制的JS插件，但如果你说，对于这个问题，我真的应该使用JS，那么我没有问题。

使用css max-widthhttps://developer.mozilla.org/en/CSS/max-width

HTML: 

<img src="flower.jpg" class="no-bigger-than-1024"/>
CSS: 

.no-bigger-than-1024{width:100%; max-width:1024px;}

img
{
    max-width:1024px;
    width:100%;
}
相关文章：