how to deal with an image to fill up a div in responsive website

[adrianmak]

my site is using bootstrap as css framework.

My site has a div to fill up a location map image

This is the code snippet.
The height of the div is fixed. The image is 585x215

<div class="col-xs-6 featured-block">
   <div class="box location-map">
     <a href="/contact-us/"><img src="assets/img/map-resp.jpg" class="img-responsive"></a>
  </div>
</div>

When it full full desktop browser the map shown properly


However, resize the browser to mobile size, the height of the image resize too, which it is not my desired.

[3fingers]

You could use that image as a background, something like this:

.img-responsive {
    background: url(yourUrl);
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center; 
}

Or serve a different image using srcset:

<picture>
  <source media="(max-width: 20em)" srcset="images/small/space-needle.jpg 1x,
  images/small/space-needle-2x.jpg 2x, images/small/space-needle-hd.jpg 3x">

  <source media="(max-width: 40em)" srcset="images/medium/space-needle.jpg 1x,
  images/medium/space-needle-2x.jpg 2x, images/medium/space-needle-hd.jpg 3x">

  <img src="space-needle.jpg" alt="Space Needle"> // Fallback
</picture>

More on this here

[szabesz]

...or, you might want to use min-height or min-width, depending on your needs, e.g.:

http://www.stucox.com/blog/dont-squash-me-using-min-width-on-fluid-images/

The background image version has the drawback that it is considered to be a design element, and not an image with an alt attribute: http://buildawesomewebsites.com/blog/html-img-tags-vs-css-background-images

[Ivan Gretsky]

I think that embedded goggle map object will auto scale to its container and will fit much better, than static image. I would do that if there were no restrictions on using it.

[Tom.]

You can do it this way:

.ratio {
  	display: block;
	position: relative;
  	height: 0;
}
.ratio__content {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.ratio--map {
	padding-bottom: 36.75%;
}

Then in your HTML add:

<div class="col-xs-6 featured-block">
   <div class="box location-map">
     <a href="/contact-us/" class="ratio ratio--map"><img src="assets/img/map-resp.jpg" class="ratio__content"></a>
  </div>
</div>

 

EDIT: 

Just realised exactly what you want. Setting it as the background image to the div it should be fine. 

[louisstephens]

I personally use the responsive embed built into bootstrap (would need the source of the map for the "..."). It works just fine for what I need.

<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

However, this keeps the aspect ratio and does not just change the width. I know I have encountered this before and I came up with a solution. If I can find it I will post it up.

[KarlvonKarton]

What I usually do is layering two image divs on top of each other.  One dummy image (low weight / one color ) in a div and on top of that an absolute div with the actual image as a background.  This is a way of ensuring that the ratio stays the same, with almost no effort...

ps: and it works well with the responsive block grid of Zurb Foundation (what I use instead of Bootstrap) -> http://foundation.zurb.com/sites/docs/grid.html#block-grids
 

<div class="rasterblock">
  <div><img src="dummy-image.jpg"></div>
  <div class="rasterinnerblock">
    <div class="rasterimageblock" style="background-image:url(actual-image.jpg)"></div>
  </div>
</div>

<style>
.rasterblock{position:relative;}
.rasterinnerblock{
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
}
.rasterimageblock{
	width:100%;
	height:100%;
	overflow:hidden;
	background-position:center center;
	background-repeat:no-repeat;
	background-size:cover;
}
</style>

 

Example: http://knokkehomes.be/verkoop/1/verkoop-vastgoed-te-koop-immo-knokke-homes.html