Twitter Bootstrap Question posted in

How can I make a large image respond nicely on all screen sizes? – Twitter bootstrap

I am using Twitter Bootstrap’s img-responsive class.

I have an image (1920×1200) that looks too big, in terms of height, on a lg screen and correct on an xs screen.

If I cut the height of the image, it looks correct on a lg screen, but way too small on an xs screen.

I tried setting the image’s max-height, but it also changes the width, resulting in gray space on either side of the image.

How can I make a large image respond nicely on all screen sizes?

<div class="container-fluid text-center">
  <div class="row hero-image-container vertical-align">
    <img src="../../static/images/house.jpg" class="img-responsive">
    <h1 class="hero-image-address">
      <i class="hero-location-icon ion-ios-location" ariahidden="true"></i> Address Here
    </h1>
    <div class="hero-image-after"></div>
 </div>
</div>
Tags:

3

Answers


  1. 0

    You can set maxHeight on the parent container and set overflow to hidden. So it will cut off the image. Something like this. This image is 1080px but I am only showing 600px of it. 

    .imageContainer{
  max-height: 600px;
  overflow: hidden; 
 
    <div class="imageContainer"><img src="http://www.walldevil.com/wallpapers/a52/wallpapers-pixel-landscapes-wallpaper-mountain-mountains-large-landscape.jpg"></div>
    Login or Signup to reply.
  2. 0 
    .img-holder {
			min-height: 500px;
			background: url('http://wfiles.brothersoft.com/w/waterfall-hd-wallpaper_171535-1920x1200.jpg') center center no-repeat;
			background-size: cover;
		}
		
		@media screen and (max-width:768px) {
			.img-holder {
				min-height: 300px;
			}
		}

@media screen and (max-width:400px) {
			.img-holder {
				min-height: 200px;
			}
		}
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<div class="container-fluid text-center">
		<div class="row hero-image-container vertical-align">

			<div class="img-holder">

			</div>
			<h1 class="hero-image-address">
			  <i class="hero-location-icon ion-ios-location" ariahidden="true"></i> Address Here
			</h1>
			<div class="hero-image-after"></div>
		</div>
	</div>

    Try using it as background-image like this with background-size:cover.

    Login or Signup to reply.
  3. 0

    Yasin’s answer looks quite practical.

    Add media queries to make the image container’s height look good in various common viewport size, like so:

    .imageContainer{
  max-height: 600px;
  overflow: hidden;
}

/* common tablet portrait */
@media (min-width: 768px) {
    .imageContainer{ max-height: 800px; }
}

/* common tablet landscape */
@media (min-width: 1024px) {
    .imageContainer{ max-height: 900px; }
}

/* common 15" notebook */
@media (min-width: 1400px) {
    .imageContainer{ max-height: 1000px; }
}
 
    <div class="imageContainer"><img src="http://www.walldevil.com/wallpapers/a52/wallpapers-pixel-landscapes-wallpaper-mountain-mountains-large-landscape.jpg"></div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search