0

I'm working on a site that uses Bootstrap. I'm working to make this site work on both desktop and mobile browsers. Everything's working except for my banner image size.

I have an image that is 640x480. I have an image defined like this:

<img alt="My Picture" src="/wwwroot/img/banner.jpg" style="height: auto; max-height:320px; max-width: 100%;" />

On mobile pages, the image looks just like I want. However, on the desktop, the image is only 320px wide. However, on the desktop, I want the image to go as wide as it can go. Basically, I want to crop the right portion.

Is there a way to do this with CSS?

Thanks!

user687554
  • 10,663
  • 25
  • 77
  • 138

4 Answers4

0

Use a media query to target the img in css file:

@media only screen and (min-width : 320px) {
    img {
       width:100%!important;

    }
}

That should work changing the min-width to your desktop size.

More info here

m33bo
  • 1,334
  • 1
  • 17
  • 34
0
  • Stick your CSS in a class.
  • If using HTML5 remove the superfluous /
  • Change your max- to min- regards height.
  • Change your standard width: to auto, changing you

CSS:

.imageFun {
    height: auto; 
    min-height:320px; 
    width:100%;
    /* this is actually no longer needed but kept for posterity */
    max-width: 100%;     
}

HTML:

<img alt="My Picture" src="/wwwroot/img/banner.jpg" class="imageFun">
Martin
  • 22,212
  • 11
  • 70
  • 132
0

on twitter-bootstrap you can use div with class responsive width : 

<div class="col-md-12 col-sm-12 col-xs-12">
    <img alt="My Picture" 
          src="/wwwroot/img/banner.jpg" 
          style="height: auto; width: 100%;" 
    /> 
</div>

Where value 12 is width scala on grid bootstap. Please look at : https://getbootstrap.com/examples/grid/

i hope it what U want

Pamungkas Jayuda
  • 1,194
  • 2
  • 13
  • 31
0

You are using Booststrap, so remove the inline styling and add class="img-responsive col-xs-12

That will fix it.

Mazer Rakham
  • 43
  • 7