I am using Bootstrap 3 and are at the moment working with resizing images. I would like to have more control over the height of an image on different viewports. The below example actually illustrate what I would like, but the reason why it is working is because I set the item1 class. The problem is that the image is now stretching weird.
If I remove the custom item1 classes I made the image is responsive. But the height of the image is just to small on small viewports.
Is there a good way to control an image height, if the height of the image should be different on the viewports?
Best regards
<style>
.banner{position:relative}
.banner img{width:100%}
.banner .container{position: absolute; left:0; right:0; top:50%; text-align:left; transform:translateY(-50%)}
.home_slider_content
{
max-width: 580px;
}
.home_slider_title
{
font-size: 60px;
font-weight: 600;
color: #FFFFFF;
line-height: 1.2;
}
.home_slider_subtitle
{
font-size: 14px;
font-weight: 400;
color: #FFFFFF;
line-height: 2.14;
margin-top: 22px;
}
.home_button
{
margin-top: 40px;
}
@media screen and (min-width: 300px) {
.item1 {
height: 500px;
}
}
@media screen and (min-width: 800px) {
.item1 {
height: 600px;
}
}
</style>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
</head>
<body>
<div class="banner">
<img src="https://i.ibb.co/h9pxMmg/home-slider-1.jpg" class="img-responsive item1">
<div class="container">
<div class="home_slider_content">
<div class="home_slider_title">A new Online Shop experience.</div>
<div class="home_slider_subtitle">Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Nullam a ultricies metus. Sed nec molestie eros. Sed viverra
velit venenatis fermentum luctus.</div>
<div class="button button_light home_button"><a href="#">Shop Now</a></div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>