full width image container

Question

I want to have full width responsive image in a container in bootstrap. The size of the image I am using is 800 by 667. When I use the below code, what happens is image is not fully scaled in large screens. can someone help me please?

 <div class="myDiv">
        <img class="myImage" src="...." >
    </div>

Css:

.myDiv {
    padding: 0;
}
.myImage {
    max-width: 100%;
    height: 500px;

}

Do you want the image to remain at 500px height no matter the width of the screen? — Chris, Sep 11 '16 at 14:35
no, but even If I set it auto, the image is not scaled full width. I wondering why? — Bing, Sep 11 '16 at 14:38
@Bing if want to maintain the `aspect ratio` of the image i.e., you don't want it to stretch it out- you should pin down one dimension and set the other `auto` (see [this](http://stackoverflow.com/questions/39289576/css-image-resize-issue/39289947#39289947) for more explanation)... — kukkuz, Sep 11 '16 at 14:45
https://jsfiddle.net/ravrav/2hx7fv2f/ Here is my jsfiddle link. now the image is in full width but the image height is really long as it is in auto. — Bing, Sep 11 '16 at 14:57
@Bing that is expected behaviour... hope you have read [this](http://stackoverflow.com/questions/39289576/css-image-resize-issue/39289947#39289947) :) — kukkuz, Sep 11 '16 at 15:08

score 0 · Accepted Answer · answered Sep 11 '16 at 14:29

0

You have a fixed height. Try setting height: auto; to maintain the scale

answered Sep 11 '16 at 14:29

Zedkay22

434
5
13

I tried but still the image is not scaled full width. – Bing Sep 11 '16 at 14:37
This is something you should put in a comment, not an answer. – Dekel Sep 11 '16 at 14:42
Remove "max" from max-width so it's just width:100% – Zedkay22 Sep 11 '16 at 14:45
Zedkay22, I removed max, and set height to auto, the image has full width now but the height is much more awkward. – Bing Sep 11 '16 at 14:58
You can specify the height without it being auto if you like. So just change height back to the pixels you wanted. Height:500px; – Zedkay22 Sep 11 '16 at 15:02
zedkay22, I changed it back to height:500px. It works good in large device.But it might end up looking long mobile devices. Is there any other way to mention the height so that it will look nice in smaller devices as well? Thanks – Bing Sep 11 '16 at 15:10
Implement a max height instead. So change height:500px; to max-height:500px; let me know if that works for you ! – Zedkay22 Sep 11 '16 at 15:27

score 0 · Answer 2 · answered Sep 11 '16 at 14:51

What you should do is remove the max-width and replace it with just width.

If you want to set it a specific height, use the transform: scaleX(), scaleY() property on the image.

.myImage {
    transform: scaleX(1.5); //scales the image 1.5 times for the X-axis
}

.myDiv {
  padding: 0;
}
.myImage {
  width: 100%;
}

<div class="myDiv">
  <img class="myImage" src="http://instantentity.com/wp-content/uploads/2016/02/Instant-Entity-CSS.jpg">
</div>

full width image container

2 Answers2