Jquery 调整浏览器大小时保持图像比例，从而调整图像标记的大小

我有一个图像标签，宽度为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;
}

标题
描述

.视图{
宽度：19%；
高度：200px；
利润率：0.5%；
浮动：左；
溢出：隐藏；
位置：相对位置；
文本对齐：居中；
游标：默认值；
背景：#000无重复中心；
背景尺寸：封面；
}
.view.mask、.view.content{
宽度：100%；
高度：200px；
位置：绝对位置；
溢出：隐藏；
排名：0；
左：0；
}
.查看img{
显示：块；
位置：相对位置；
宽度：100%；
高度：自动；
利润率：0.5%；
}
.视图h2{
文本转换：大写；
颜色：#fff；
文本对齐：居中；
位置：相对位置；
字号：17px；
填充：10px；
背景：rgba（0,0,0,0.8）；
利润率：20px0；
}
.视图p{
字体系列：佐治亚，衬线；
字体：斜体；
字体大小：12px；
位置：相对位置；
颜色：#fff；
填充：10px 20px 20px；
文本对齐：居中；
}
.查看a.info{
显示：内联块；
文字装饰：无；
填充：7px 14px；
背景：#000；
颜色：#fff；
文本转换：大写；
-网络工具包盒阴影：0 1px#000；
-moz盒阴影：0 1px#000；
盒影：0 0 1px#000；
}
.查看a.信息：悬停{
-网络工具包盒阴影：0 0 5px#000；
-moz盒阴影：0 0 5px#000；
盒影：0 0 5px#000；
}
.查看第十个img{
-webkit转换：scaleY（1）；
-moz变换：scaleY（1）；
-o变换：scaleY（1）；
-ms变换：scaleY（1）；
变换：scaleY（1）；
-webkit过渡：所有0.7都易于输入输出；
-moz转换：所有0.7秒都易于输入输出；
-o型过渡：所有0.7秒均易于输入输出；
-ms转换：所有0.7秒均易于输入输出；
过渡：所有0.7秒都易于输入输出；
}
.第十视图.遮罩{
/*
donkerblauw背景色：rgba（0,101147,0.3）；
利希特布劳夫背景色：rgba（311831910.3）；
*/
背景色：rgba（255、255、255、0.3）；
-webkit过渡：所有0.5s线性；
-moz过渡：所有0.5s线性；
-o型过渡：所有0.5s线性；
-ms转换：所有0.5s线性；
过渡：所有0.5s线性；
-ms过滤器：“progid:DXImageTransform.Microsoft.Alpha（不透明度=0）”；
过滤器：alpha（不透明度=0）；
不透明度：0；
}
.第十视图h2{
边框底部：1px实心rgba（0,0,0,0.3）；
背景：透明；
保证金：20px40px40px40px；
-webkit变换：缩放（0）；
-moz变换：比例（0）；
-o变换：标度（0）；
-ms变换：尺度（0）；
变换：比例（0）；
颜色：#333；
-webkit过渡：所有0.5s线性；
-moz过渡：所有0.5s线性；
-o型过渡：所有0.5s线性；
-ms转换：所有0.5s线性；
过渡：所有0.5s线性；
-ms过滤器：“progid:DXImageTransform.Microsoft.Alpha（不透明度=0）”；
过滤器：alpha（不透明度=0）；
不透明度：0；
}
.第10页{
颜色：#333；
-ms过滤器：“progid:DXImageTransform.Microsoft.Alpha（不透明度=0）”；
过滤器：alpha（不透明度=0）；
不透明度：0；
-webkit变换：缩放（0）；
-moz变换：比例（0）；
-o变换：标度（0）；
-ms变换：尺度（0）；
变换：比例（0）；
-webkit过渡：所有0.5s线性；
-moz过渡：所有0.5s线性；
-o型过渡：所有0.5s线性；
-ms转换：所有0.5s线性；
过渡：所有0.5s线性；
}
.查看第十个a.info{
-ms过滤器：“progid:DXImageTransform.Microsoft.Alpha（不透明度=0）”；
过滤器：alpha（不透明度=0）；
不透明度：0；
-webkit变换：缩放（0）；
-moz变换：比例（0）；
-o变换：标度（0）；
-ms变换：尺度（0）；
变换：比例（0）；
-webkit过渡：所有0.5s线性；
-moz过渡：所有0.5s线性；
-o型过渡：所有0.5s线性；
-ms转换：所有0.5s线性；
过渡：所有0.5s线性；
}
.视图10：悬停img{
-webkit转换：规模（10）；
-moz变换：标度（10）；
-o变换：标度（10）；
-ms变换：标度（10）；
变换：标度（10）；
-ms过滤器：“progid:DXImageTransform.Microsoft.Alpha（不透明度=0）”；
过滤器：alpha（不透明度=0）；
不透明度：0；
}
.视图10：悬停.遮罩{
-ms过滤器：“progid:DXImageTransform.Microsoft.Alpha（不透明度=100）”；
过滤器：α（不透明度=100）；
不透明度：1；
}
.第十视图：悬停h2、.第十视图：悬停p、.第十视图：悬停a.info{
-webkit转换：规模（1）；
-moz变换：比例（1）；
-o变换：标度（1）；
-ms变换：尺度（1）；
变换：比例（1）；
-ms过滤器：“progid:DXImageTransform.Microsoft.Alpha（不透明度=100）”；
过滤器：α（不透明度=100）；
不透明度：1；
}

小提琴：我想

height: auto;

在你的CSS声明中，你可以做你想做的事

---

更新的fiddle:

如果您不提供height属性，它将自动获取height。当你们给任何一个img标签加上高度时，图像也会被扭曲，所以除了一些罕见的情况外，永远不要给图像加上固定高度。只需给出width属性

img{
宽度：19%；
利润率：0.5%；
背景色：黑色；
}

---

如果要保存

高度

，请将

img

更改为

div

带有

背景图像的块

HTML

<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>

---

在

抱歉中，刚刚更新了post and fiddle，意识到div对图像产生了很大的影响。

img{
   width: 19%;
   height: 200px;
   margin: 0.5%;
   background-color:black;
   background-size: cover;
}
div
{
    width:19%;
    height:200px;
    margin:0.5%;
    background-color:black;
    background-size: cover;
    display:inline-block;
    background-position:50% 50%;
}