背景图像的响应式重新缩放 CSS

Question

我想构建一个非常小的响应式网站，它带有图像悬停效果，我使用 css 背景图像开关创建了该效果。

我的问题是我尝试重新缩放图像的所有操作都不起作用。 "Background-size: contain" 在图像下方创建一个大白块

css

#m2 {
    background-image: url('../p/test.jpg');
    height: 400px;
    margin-left: 16px;
    margin-right: 16px;
    background-size: contain;

}

#m2:hover {
   background-image: url('../p/overlay.png');
   margin-left: 16px;
   margin-right: 16px; 
}

html

<a href="s2.html"><div id="m2"></div></a>

纯 CSS/HTML 这可能吗？

Answer 1

您尝试过：

background-size:cover;

?

拉伸图像以适合背景。

关于动态高度和宽度，您可能希望将填充设置为百分比。喜欢 padding:20%。

看这里：http://jsfiddle.net/Preben/8by1412u/

Answer 2

#m2 { 
  background-image: url('../p/test.jpg') no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  margin-left: 16px;
  margin-right: 16px; 
}

#m2:hover {
  background-image: url('../p/overlay.png');
  margin-left: 16px;
  margin-right: 16px; 
}


<div id="m2"><a href="s2.html"><div id="m2"></a></div>

背景图像的响应式重新缩放 CSS

Responsive rescale of background images CSS

css

background

image

scale

responsive-design