如何将图像的大小设置为屏幕宽度的100％，但仅限于<1024 px [英] How to size an image to be 100% width of the screen, but only if <1024 px
问题描述
我想在网站上放一张图片。我希望它不是一个背景图像，而是一个普通的图像，我以后可以用来悬停，悬停在某个区域，屏幕上发生了某些变化的那种交互。
I would like to put an image on a website. I would like it not to be a background image, but a normal image, what I can later use for hovers and "hover over some region, something changes on the screen" kind of interactions.
我想要做的是使这个图像100％宽度的浏览区域，但仅限于屏幕小于1024px。如果屏幕较大，那么我希望图像正好是1024px宽。
What I would like to do is to make this image 100% width of the browsing area, but only if the screen is smaller than 1024px. If the screen is bigger, then I want the image to be exactly 1024px wide.
你会怎么做？在某处我读过CSS3可以自动背景宽度以适应浏览器窗口，但我认为通过使用背景图像我不能在以后对图像做交互式技巧。但我从来没有做过互动技巧，所以也许它是可能的。
How would you do this? Somewhere I've read that CSS3 can do automatic background-width to fit with the browser window, but I think by using background image I cannot do interactive trick on the image later. But I've never done interactive tricks, so maybe it's possible.
通过交互式技巧我的意思是如果鼠标指针在多边形区域上，那么div或图像改变或出现在某处。你能指出我在哪里阅读这个技术，它是如何被称为的？
我没有JavaScript的经验，我只使用了premade JS插件，但如果你说这个问题我真的应该使用JS然后我没有问题。
I have no experience in JavaScript, I've only used premade JS plugins, but if you say that for this problem I really should use JS then I have no problem with that.
推荐答案
使用css max-width
https ：//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;}
这篇关于如何将图像的大小设置为屏幕宽度的100％，但仅限于<1024 px的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
