Question

我希望我的形象能够做到这一点。 https://metallica.com/

当您重新调整浏览器大小时，'metallica'图像会发生变化。另外，如果可能的话，我想找到一个CSS ONLY解决方案。我可以使用php解决方案，但更喜欢css。不过，欢迎任何关于metala网站如何做到这一点的想法。

 <header class="header-contain">
    <img src="images/Main_Image.png">
 </header>

 .header-contain img{
    width: 1349px;
    height: 430px;
 }

我知道我没有在这里做任何事情来做我想做的事情但是我把它放在那里所以有一些工作要做。此外，我想要的想法是能够始终在屏幕的整个宽度上调整图像的大小，只是始终居中并且出现完整的图像。

我对css也比较陌生。谢谢你提前。

Answer 1

使用

width: 100%;

使图像采用包含它的元素的大小。这样，当您调整窗口大小时，它也会缩小。

Answer 2

一种方法是使用背景图像并将CSS属性background-size设置为＆＃34;覆盖＆＃34;，将背景图像的大小保持为其容器。

使用background-image，容器没有高度。因此，只要您知道横幅图像的比例，就可以使用填充来设置容器相对于其宽度的高度。

＆＃13;

div#banner {
  background-size: cover;
  background-image: url('http://lorempixel.com/800/200/city/3/');
  padding-top: 25%; /* Aspect ratio of 4:1, height is 1/4 of the  width */
}

＆＃13;

<div id="banner"></div>

＆＃13;

Answer 3

Look into the CSS units VW and VH

VW和VH可用于设置视图高度或视图宽度的％的绝对大小。与父母榆树的％不同，vh / vw总是与实际窗口大小相关联。

如何根据重新调整浏览器的大小来缩小和增长图像。

3 个答案: