Question

我该如何解决这个问题？图像设置为百分比，如果我设置高度百分比，则没有任何反应。

相关的html：

<div class="header">
   <img src="pictures/header.png" width="30%">
   </div>

该div的Css：

.header {
margin: auto;
width: 70%;
padding: 1%;
text-align: center;
font-family: Arial, Helvetica, sans-serif,"serif";
font-size: 130%;
color: #e5e5e5;
background-color: #232323;

第二张图片的Html：

<div class="main">
<h1> bla bla bla </h1>
<img class="right" src="bilder/wave.gif">
<p> bla bla bla </p>
</div>

提到的两个课程的Css：

.right{
    float: right;
    width: 15%;     
}

.main{ 
margin:auto;
width: 70%;
padding:1%;
align: center;
text-align:left; 
font-family: Arial, Helvetica, sans-serif,"serif";
color: #2b2b2b;
font-size: 130%;
background-color:rgba(178, 92, 42, 0.5);
background-image: url("../pictures/scroll.jpg");
background-size: 100%;
padding-bottom:2%;
}

Answer 1

当你没有影响窗户高度/宽度并且百分比单位根据高度/宽度工作时，没有任何反应。

浏览器支持的缩放仅适用于文本，因为字体大小使用像素单位。

尝试使用px然后使用zoomin设置固定宽度，然后看它增长和缩小。

Answer 2

解决此浏览器缩放问题的最佳方法是＆＃34; box-sizing：border-box ＆＃34;，

* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

当我重新设置我的浏览器窗口时，我的图像会重新调整以适应它，但如果我放大或缩小图像保持相同的大小

2 个答案: