[英]I don't want images to resize when I resize the browser
I have some images on my webpage. 我的网页上有一些图片。 I originally put their sizes in pixels, eg:
我最初将它们的大小以像素为单位,例如:
<IMG src="image.png" width=700px height=100px>
When I used different machines with different screen resolutions, sometimes the page didn't look like I wanted it to. 当我使用具有不同屏幕分辨率的不同机器时,有时页面看起来并不像我想要的那样。
I then switched to set the dimensions using percentages rather than pixels, eg: 然后,我切换为使用百分比而不是像素来设置尺寸,例如:
<div class="logo_container">
<IMG src="image.png">
</div>
and 和
.logo_container img {
padding: 15px;
width: 37%;
position: relative;
}
The page now looks how I want it, but if I start to resize my browser window, the images shrink (whilst maintaining aspect ratio). 该页面现在看起来像我想要的样子,但是如果我开始调整浏览器窗口的大小,图像将缩小(同时保持宽高比)。 I don't want this to happen.
我不希望这种情况发生。
I want the web page to look correct when the browser is full screen, but then I don't want images to shrink. 我希望浏览器全屏显示时网页看起来正确,但是我不希望图像缩小。
Thank you. 谢谢。
You should change the css based on the screen width: 您应该根据屏幕宽度更改CSS:
<div class="logo_container">
<IMG src="image.png">
</div>
<style>
@media screen and (max-width: 540px) {
.logo_container img {
padding: 15px;
width: 100%;
position: relative;
}
}
@media screen and (min-width: 540px) and (max-width: 780px) {
.logo_container img {
padding: 15px;
width: 50%;
position: relative;
}
}
@media screen and (min-width: 780px) {
.logo_container img {
padding: 15px;
width: 30%;
position: relative;
}
}
</style>
Use em. 使用em。
<img src="" alt="">
CSS: CSS:
.logo_container img {
width: 1em;
}
em is constant between all devices - it is always the same size in real life: see https://www.w3schools.com/cssref/css_units.asp for more info. em在所有设备之间都是恒定的-在现实生活中它始终是相同的大小:有关更多信息,请参见https://www.w3schools.com/cssref/css_units.asp 。
Just set the width of the image to a fixed amount of pixels: 只需将图像的宽度设置为固定的像素数量即可:
.logo_container img {
width: 200px;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.