CODEWITHSUNDEEP
csstwitter-bootstrap
user1554264
user1554264

Reputation: 1224

Bootstrap responsive CSS image width skewed and distorted

I am using Bootstrap to create a website that uses the carousel component which takes up a large portion of the page. I am finding that when I resize the browser window and drag the viewport horizontally that the image width becomes skewed and distorted. I have set the following overall CSS styles for my carousel along with media queries for different widths.

Are there any amendments to my CSS rules or properties I can apply to .carousel .item and .carousel img to prevent the width of the image being distorted when the browser window is dragged horizontally? I was thinking width:100%; my possibly resolve this issue?

Here is an image of the skewing occuring when resizing the browser horizontally: enter image description here

Here is the website: http://www.the-session.co.uk/jen/

Here is the CSS:

.carousel .item {
  height: 900px;
}
.carousel img {
  min-width: 100%;
  height: 900px;
}

@media (max-width: 979px) {

  .carousel .item {
    height: 500px;
  }
  .carousel img {
    width: auto;
    height: 500px;
  }
}


@media (max-width: 767px) {

  .carousel .item {
    height: 300px;
  }
  .carousel img {
    height: 300px;
  } 
}

Upvotes: 3

Views: 13218

Answers (3)

Red Zephyr Design
Red Zephyr Design

Reputation: 101

The problem lies in the fact that you are defining a specific height and/or width (depending on your layout) which is causing the issue. If your design allows for it, change the "height:900px" from .carousel img to "height:auto" in both your @media files so that your image is not being distorted.

If however the desired outcome is to actually have the carousel image expand to fill the whole viewport another solution will be necessary, likely requiring to change the images to background images to fill an absolutely positioned div.

Upvotes: 6

Shail
Shail

Reputation: 3649

You are setting the wrong values for height in the media queries . Since your img height in main css is set to height:900px; You need to do the following :

@media (max-width: 979px) {

 .carousel .item {
     height: 750px;
 }
  .carousel img {
    width: auto;
    height: 75 0px;
 }
}

@media (max-width: 767px) {

   .carousel .item {
     height: 600px;
    }
   .carousel img {
     height: 600px;
 } 
}

Upvotes: -1

Terry
Terry

Reputation: 66113

The problem with trying to scale images that way is that you are not preserving the initial aspect ratio of the image.

Instead, try background-size: contain. This instructs the browser to scale the image, proportionately, such that the image will fill the container along the longer axis.

Upvotes: -1

Related Questions