Question

我有这个div：

<div id="background">
            <img src="imagenes/index.jpg" height="auto" width="100%"/>
</div>

使用这个CSS：

#background {
position: fixed;
width: 100%;
height: 100%;
top: 0%;
left: 0%;
right: 0%;
z-index: -1; }

我想知道是否有办法更改图像高度/宽度，具体取决于设备/浏览器的高度/宽度是否更大，以便图像可以覆盖整个屏幕。

我知道如果设备/浏览器更高，更改高度=“100％”width =“auto”将是一个不错的选择，但如果它是枯萎，则不是。

有什么好主意吗？

Answer 1

通常，当您定位移动设备时，您应该使用media queries。但是在你的情况下，它只是一个全屏背景，所以你可以在这里使用background-size属性：

#background { 
    background: url(imagenes/index.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

注意：此属性仅在现代浏览器中受支持，对于旧的IE版本（＆lt; 8），您可以尝试使用此IE过滤器：

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='imagenes/index.jpg',
sizingMethod='scale');

-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='imagenes/index.jpg',
sizingMethod='scale')";

Answer 2

如果您可以设置特定值，则可以尝试使用@media功能。

#background
{
    height:100%;
    width: 100%;
}
@media(max-width:1000px){
    #background{
        height:1000px;
        width: 800px;
    }
}

Answer 3

使用它来使图像响应：

img {
  width: 100%;
  max-width: 100%;
  height: auto;
}

Answer 4

@media all and (min-width: 768px) and (max-width: 1024px) {
     .pr {
      display: none;
     }
     //write here rest of code that will vanish when the screen is smaller then 1024px
    }

希望这有帮助！我把它用于我的一些项目，像魅力一样消失了一些东西：）

根据设备/浏览器大小更改图像宽度和高度

4 个答案: