Question

我正在尝试在调整浏览器大小后调整页面中的图像大小。我可以管理，但我只是想知道是否有更好的方法来调整所有不同宽度的图像（方形，矩形，...），而无需为每个图像调用displayWindowSize();并设置不同的值{{ 1}}。该值是tpReport宽度和图像宽度之间的关系。

调整页面中不同宽度的所有图像的最佳方法是什么？

3,5

Answer 1

您的问题可以在没有Javascript的情况下解决如果您的图片尺寸取决于窗口宽度，请考虑使用vw单位。

#tpReport {
  float: right;
  background-color: yellow;
  display: inline-block;
  width: 45%;
}

#square {
  width: 9vw
}

#rectangular {
  width: 15vw
}

<div id="tpReport" style="">
  <p>Try to resize the browser window to display the windows height and width.</p>
  <span style="bottom: 60%; left: 41%;clear:both;">
           <a href="#"> 
            <img id="rectangular" src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5d/Pear_DS.jpg/220px-Pear_DS.jpg" /> 
           </a>
         </span>

  <span style="bottom: 10%; left: 41%;float:right;">
           <a href="#"> 
             <img id="square" src="http://tweedfruitexchange.com.au/wp-content/uploads/2016/08/burre-pear-e1471916917953.png" /> 
           </a>
         </span>
</div>

Answer 2

摆脱所有脚本。你不需要JS。在单独的CSS文件中更改您喜欢的宽度。以下是您可以做的一个示例。更改我使用的宽度大小以满足您的需求。此外，无论您在html文件上完成样式设置，还需要将其放在CSS文件中。它可以清理你的html＆amp;使阅读更容易。

在CSS中：

#rectangle{
width: 60px;
}

#square {
width: 80px;
}

调整浏览器大小后调整页面中的所有图像

2 个答案: