当浏览器的宽度/高度改变时自动调整图像大小
[英]Automatically resizing images when the browser width/height changes
问题描述
I have a page with many images in divs and the layout looks good only in full size, when the browser window is smaller it's really messy. 
我的页面中有很多包含div图像的页面，并且仅在全尺寸时布局看起来不错，而当浏览器窗口较小时，它的确很乱。 I found a similar question on stack overflow but their answers don't work for my case. 我在堆栈溢出中发现了一个类似的问题，但他们的答案对我的情况不起作用。
EDIT: I did everything what you guys advised but it still doesn't work. 编辑：我做了你们所建议的一切，但仍然行不通。
<!DOCTYPE html> <html> <body background=""> <head> <style> div.asciigun { top: 30%; left: 50%; position: absolute; max-width: 100%; } </style> </head> <body> <div class="asciigun"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTU7ROirglSjKnpsLvt29uCDlVtpZutirtiXyg3FF0UtXFf0TnE" height="90%" width="90%" > </div> </body> </html>
2 个解决方案
解决方案1
1 2018-07-04 08:32:53
Let's try another approach. 让我们尝试另一种方法。 Try not to modify max-width or max-height . 尽量不要修改max-width或max-height 。 Just leave it as it is (or set width: 100% and height: 100% ). 保持原样（或将width: 100%设置width: 100% ， height: 100%设置width: 100% height: 100% ）。
And then change <img src="url.jpg"> to background: url("url.jpg"); 然后将<img src="url.jpg">更改为background: url("url.jpg"); and then just do 然后做
.image {
background-size: cover;
}
or 要么
.image {
background-size: contain;
}
解决方案2
0 2018-07-05 11:11:15
Ok I figured it out! 好吧，我想通了！ I needed viewport value instead of %. 我需要视口值而不是％。 Now images go proportionally with browser size and stay in place. 现在，图像与浏览器大小成正比，并保持不变。
div.asciigun {
position: absolute;
top: 30vw;
left: 74vw;
z-index: 1;
width: 30vw;
height: 15vw;
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.