How to auto adjust images to fit a mobile device in MVC

Home > Search > How-to
  by

By default, bootstrap probably has the following.

img {
  border: 0;
}

 

When viewing images on a website that was build using MVC, if the images are large, they may look just fine on a laptop or large monitor. However, on a mobile device, the image may be much to large. For example, here is a large image (1160 pixels wide).

 

It is also important that the image HTML not have a width and height set. Inline HTML will override the img settings in a CSS file. In this example, an image does have inline HTML. This is what we want to avoid.

 

To correct this, the bootstrap.css file can be adjusted to contain the following.

img {
  border: 0;
  max-width: 100%;
  height: auto;
}

 



Add a Comment




We will never share your name or email with anyone. Enter your email if you would like to be notified when we respond to your comment.




Please enter in the box below so that we can be sure you are a human.




Comments