我的图片标签宽度为19%,高度为200px。 因此,在调整浏览器大小时,该图像标记的宽高比正在发生变化。
我希望图像始终覆盖图像标签:类似宽度:100%;和高度:100%;,但保持图像src的纵横比。有点像'背景 - 封面'。因此,在调整浏览器大小时,图像标记的“背景颜色”根本不可见。 我认为div会导致我不能使用0.5边距的问题。
<div class='view view-tenth'>
<img src='http://doc.jsfiddle.net/_downloads/jsfiddle-logo-white.svg' class='imgpreview' />
<div class='mask'>
<h2>Title</h2>
<p>description</p>
<a href='#' class='info'>Read More</a>
</div>
.view {
width: 19%;
height: 200px;
margin: 0.5%;
float: left;
overflow: hidden;
position: relative;
text-align: center;
cursor: default;
background: #000 no-repeat center center;
background-size:cover;
}
.view .mask,.view .content {
width: 100%;
height: 200px;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
}
.view img {
display: block;
position: relative;
width:100%;
height:auto;
margin: 0.5%;
}
.view h2 {
text-transform: uppercase;
color: #fff;
text-align: center;
position: relative;
font-size: 17px;
padding: 10px;
background: rgba(0, 0, 0, 0.8);
margin: 20px 0 0 0;
}
.view p {
font-family: Georgia, serif;
font-style: italic;
font-size: 12px;
position: relative;
color: #fff;
padding: 10px 20px 20px;
text-align: center;
}
.view a.info {
display: inline-block;
text-decoration: none;
padding: 7px 14px;
background: #000;
color: #fff;
text-transform: uppercase;
-webkit-box-shadow: 0 0 1px #000;
-moz-box-shadow: 0 0 1px #000;
box-shadow: 0 0 1px #000;
}
.view a.info: hover {
-webkit-box-shadow: 0 0 5px #000;
-moz-box-shadow: 0 0 5px #000;
box-shadow: 0 0 5px #000;
}
.view-tenth img {
-webkit-transform: scaleY(1);
-moz-transform: scaleY(1);
-o-transform: scaleY(1);
-ms-transform: scaleY(1);
transform: scaleY(1);
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.7s ease-in-out;
-o-transition: all 0.7s ease-in-out;
-ms-transition: all 0.7s ease-in-out;
transition: all 0.7s ease-in-out;
}
.view-tenth .mask {
/*
donkerblauw background-color: rgba(0, 101, 147, 0.3);
lichtblauw background-color: rgba(31, 183, 191, 0.3);
*/
background-color: rgba(255, 255, 255, 0.3);
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
transition: all 0.5s linear;
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
}
.view-tenth h2 {
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
background: transparent;
margin: 20px 40px 0px 40px;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
color: #333;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
transition: all 0.5s linear;
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
}
.view-tenth p {
color: #333;
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
transition: all 0.5s linear;
}
.view-tenth a.info {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
transition: all 0.5s linear;
}
.view-tenth:hover img {
-webkit-transform: scale(10);
-moz-transform: scale(10);
-o-transform: scale(10);
-ms-transform: scale(10);
transform: scale(10);
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
}
.view-tenth:hover .mask {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
}
.view-tenth:hover h2,.view-tenth:hover p,.view-tenth:hover a.info {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
}
答案 0 :(得分:2)
答案 1 :(得分:0)
如果你不给高度属性,那么它将自动占据高度。当你给任何img标签赋予高度时,图像也会变形,所以除了一些罕见的情况外,永远不要给图像赋予固定高度。请给出宽度属性。
img{
width: 19%;
margin: 0.5%;
background-color:black;
}
&#13;
<img src="http://doc.jsfiddle.net/_downloads/jsfiddle-logo-white.svg"><img src="http://doc.jsfiddle.net/_downloads/jsfiddle-logo-white.svg"><img src="http://doc.jsfiddle.net/_downloads/jsfiddle-logo-white.svg"><img src="http://doc.jsfiddle.net/_downloads/jsfiddle-logo-white.svg"><img src="http://doc.jsfiddle.net/_downloads/jsfiddle-logo-white.svg">
&#13;
答案 2 :(得分:0)
如果您要保存height
,请将img
更改为div
<{1}}
<强> HTML 强>
background-image
<强> CSS 强>
<div style="background-image: url('http://doc.jsfiddle.net/_downloads/jsfiddle-logo-white.svg');"></div>
<div style="background-image: url('http://doc.jsfiddle.net/_downloads/jsfiddle-logo-white.svg');"></div>
<div style="background-image: url('http://doc.jsfiddle.net/_downloads/jsfiddle-logo-white.svg');"></div>
<div style="background-image: url('http://doc.jsfiddle.net/_downloads/jsfiddle-logo-white.svg');"></div>
<div style="background-image: url('http://doc.jsfiddle.net/_downloads/jsfiddle-logo-white.svg');"></div>
JSFiddle 中的