Keep image ratio while resizing browser and thus resizing the image tag

Question

I have an image tag with a width of 19% and a height of 200px. So, when resizing the browser, the aspect ratio of that image tag is changing.

I want the image to cover the image tag at all times: kind of like width:100%; and height:100%;, but keeping the aspect ratio of the image src. A bit like 'background-cover'. So, that when resizing the browser, the 'background color' of the image tag isn't visible at all. I think the divs cause the issue that I can't use the 0.5 margin thing.

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

Fiddle: http://jsfiddle.net/3122mts4/10/

Answer 1

If you want to save height, change img to div blocks with background-image

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>

CSS

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%;
}

in JSFiddle

Answer 2

If you don't give height property then it will take height automatically. When you give height to any img tag then image also get distorted so never give fix height to images except some rare condition. Just give width property.

img{
   width: 19%;
   margin: 0.5%;
    background-color:black;
   }

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

Answer 3

I think that

height: auto;

in you CSS declaration could do what you want.

Updated fiddle: http://jsfiddle.net/3122mts4/4/