CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
MK-DK
MK-DK

Reputation: 1085

Change height of image on viewport

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>

Upvotes: 3

Views: 1112

Answers (2)

bron
bron

Reputation: 1548

The image may not have a good aspect ratio because you have a fixed width and a fixed height

.banner img {
  width: 100%;
}
...
@media screen and (min-width: 800px) {
  .item1 {
    height: 500px;
  }
}

You set a class="img-responsive" to the item1 image. This means that this image has already an height:auto so in responsive design it is better to give the item1 image a width like

.banner img {
  width: 100%;
}
...
@media screen and (min-width: 768px) {
  .item1 {
    width: 420px; /* example, or use a % */
  }
}

Try to use the correct @media Bootstrap breakpoints, in Bootstrap 3:

min-width: 768px / min-width: 992px / min-width: 1200px

You changed the css of class .container in position: absolute with fixed left and right. This will give problems because .containeer is not defined this way in Bootstrap.

update

Example how to use the Bootstrap classes with your image and text.

<div class="container">
  <div class="row banner">
    <div class="col-sm-12 item1">
      <img src="https://i.ibb.co/h9pxMmg/home-slider-1.jpg" class="img-responsive" alt="">
    </div>
    <div class="col-sm-12 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="home_button">
        <a href="#" class="btn btn-success">Shop Now</a>
      </div>
    </div>
  </div>
</div>

with css

.banner .item1 img {
  width: 100%;
  margin: 0 auto;
}
@media (min-width: 576px) {
  .banner .item1 img { width: 400px; }
}
@media (min-width: 768px) {
  .banner .item1 img { width: 650px; }
}
@media (min-width: 992px) {
  .banner .item1 img { width: 900px; }
}
.home_slider_content {
  margin-top: 22px;
  text-align: center;
}
.home_slider_title {
  font-size: 60px;
  font-weight: 600;
  background-color: #933;
  color: #fff;
  line-height: 1.2;
}
.home_slider_subtitle {
  margin-top: 22px;
  font-size: 14px;
  font-weight: 400;
  background-color: #c66;
  color: #fff;
  line-height: 2.14;
}
.home_button {
  margin-top: 40px;
}

Upvotes: 0

Umar Abdullah
Umar Abdullah

Reputation: 1290

update below in css.

.banner img{
  height:auto;
  max-width:100%;
  max-height:90%;

}


<style>
    .banner{position:relative}
    .banner img{
      height:auto;
      max-width:100%;
      max-height:90%;

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

Upvotes: 1

Related Questions