使用CSS根据浏览器大小自动调整图像大小
我希望在调整浏览器窗口大小时自动调整所有(或仅部分)图像的大小。我找到了下面的代码--它什么也做不了。
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>
<body>
<div id="icons">
<div id="contact">
<img src="img/icon_contact.png" alt="" />
</div>
<img src="img/icon_links.png" alt="" />
</div>
</body>
</html>CSS
body {
font-family: Arial;
font-size: 11px;
color: #ffffff;
background: #202020 url(../../img/body_back.jpg) no-repeat top center fixed;
background-size: cover;
}
#icons {
position: absolute;
bottom: 22%;
right: 8%;
width: 400px;
height: 80px;
z-index: 8;
transform: rotate(-57deg);
-ms-transform: rotate(-57deg);
-webkit-transform: rotate(-57deg);
-moz-transform: rotate(-57deg);
}
#contact {
float: left;
cursor: pointer;
}
img {
max-width: 100%;
height: auto;
}在调整浏览器窗口大小时，我如何才能基本上有一个全屏设计(使用background-size: cover)，并让div元素位于完全相同的位置(% wise)，同时它们的大小也可以调整(就像cover对背景所做的那样)？
回答 3
Stack Overflow用户
发布于 2013-04-25 22:41:49
镜像容器
使用上面的技巧缩放图像仅在容器中图像的大小发生变化时有效。
#icons容器对宽度和高度使用px值。调整浏览器大小时，px值不会缩放。
解决方案
使用以下方法之一：
- 使用
%值定义宽度和/或高度。 - 使用一系列
@media查询根据当前屏幕大小将宽度和高度设置为不同的值。
Stack Overflow用户
发布于 2015-11-15 22:26:26
这可能是一个过于简单的答案(我在这里仍然是新手)，但我过去所做的补救这种情况的方法是计算出我希望图像占据的屏幕百分比。例如，我正在制作的一个网页中，徽标必须占据屏幕尺寸的30%才能获得最佳效果。我尝试了一下，最后尝试了这个代码，到目前为止，它对我来说是有效的：
img {
width:30%;
height:auto;
}也就是说，这将使你的所有图像在任何时候都是屏幕尺寸的30%。要解决这个问题，只需将其作为一个类，并将其直接应用于您希望达到30%的图像。下面是我在上面提到的站点上为实现此目的而编写的代码示例：
CSS部分：
.logo {
position:absolute;
right:25%;
top:0px;
width:30%;
height:auto;
}HTML部分：
<img src="logo_001_002.png" class="logo">或者，你可以把你希望自动调整大小的图片放到它自己的div中，然后在每个div上使用class tag选项(现在在需要的时候创建class标签)，但我觉得这最终会导致很多额外的工作。但是，如果网站需要它:网站需要它。
希望这能有所帮助。祝你有愉快的一天！
Stack Overflow用户
发布于 2017-07-13 02:21:25
下面的代码适用于所有浏览器，适用于我的200个数字，适用于任何宽度百分比--尽管是非法的。Jukka说“无论如何都要用它”。(该类只是将图像向左或向右浮动，并设置边距。)我不能想象为什么这不是标准方法！
<img class="fl" width="66%"
src="A-Images/0.5_Saltation.jpg"
alt="Schematic models of chromosomes ..." />随心所欲地改变窗口宽度和图像比例。
https://stackoverflow.com/questions/16217355
复制相似问题