引导响应CSS图像宽度偏斜和扭曲 [英] Bootstrap responsive CSS image width skewed and distorted

问题描述

我使用Bootstrap来创建一个网站，该网站使用了占据页面大部分的轮播组件。我发现，当我调整浏览器窗口，并拖动视口水平，图像宽度变得歪斜和扭曲。我已经为我的轮播设置了以下整体CSS样式，以及针对不同宽度的媒体查询。

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.

对我的CSS规则或属性有任何修改我可以应用到 .carousel .item 和 .carousel img 以防止浏览器窗口水平拖动时图像的宽度失真？我在想 width：100％; 我可能解决这个问题？

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:

以下是网站： http://www.the-session.co .uk / jen /

这里是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;
  } 
}

推荐答案

问题在于您正在定义导致问题的特定高度和/或宽度（取决于您的布局）。如果您的设计允许，请在@media中更改height：900px从 .carousel img 到height：auto

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.

然而，如果希望的结果是实际上有旋转木马图像展开以填充整个视口，另一个解决方案将是必要的，可能需要将图像更改为背景图像以填充绝对定位的div。

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.

这篇关于引导响应CSS图像宽度偏斜和扭曲的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！