twitter-bootstrap Bootstrap 响应式 CSS 图像宽度倾斜和扭曲
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15042986/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap responsive CSS image width skewed and distorted
提问by user1554264
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.
我正在使用 Bootstrap 创建一个网站，该网站使用占据页面大部分内容的轮播组件。我发现当我调整浏览器窗口大小并水平拖动视口时，图像宽度会倾斜和扭曲。我为我的轮播设置了以下整体 CSS 样式以及不同宽度的媒体查询。
Are there any amendments to my CSS rules or properties I can apply to .carousel .itemand .carousel imgto 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?
是否对我可以应用的 CSS 规则或属性进行了任何修改.carousel .item，.carousel img以防止在水平拖动浏览器窗口时图像的宽度失真？我在想width:100%;我可能会解决这个问题吗？
Here is an image of the skewing occuring when resizing the browser horizontally:
这是水平调整浏览器大小时发生的倾斜图像：
Here is the website: http://www.the-session.co.uk/jen/
这是网站：http: //www.the-session.co.uk/jen/
Here is the CSS:
这是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;
}
}
回答by Red Zephyr Design
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 imgto "height:auto"in both your @media files so that your image is not being distorted.
问题在于您正在定义导致问题的特定高度和/或宽度（取决于您的布局）。如果您的设计允许，请将两个@media 文件中的“height:900px”从.carousel img更改为“height:auto”，以免图像失真。
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.
然而，如果期望的结果是实际让轮播图像扩展以填充整个视口，则需要另一种解决方案，可能需要将图像更改为背景图像以填充绝对定位的 div。
回答by Terry
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.
相反，尝试background-size: contain。这会指示浏览器按比例缩放图像，以便图像沿长轴填充容器。
回答by Shail
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 :
您在媒体查询中设置了错误的高度值。由于您在主 css 中的 img 高度设置为height:900px;您需要执行以下操作：
@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;
}
}
