4

我正在基于使用 Twitter Bootstrap 构建的主题构建一个网站：http: //demo.graphikaria.com/agilis/theme。

每当我减小浏览器的宽度时，主页轮播的背景图像就会变形。

对于模板使用的默认褪色背景图像，这没什么大不了的，但如果您想使用清晰的图像或徽标，它会显得扭曲或挤压。

4

7 回答 7

10

如果您使用 IMG 标记，它最终不会比其容器 DIV 宽。因为引导程序会重新调整固定图像的大小以实现流畅的布局，尤其是在移动设备上，所以图像会被压缩到屏幕宽度。

到目前为止，对我来说似乎效果很好的另一种方法是使用带有背景图像的 <div> 标签。

班上：

.carousel-inner > .item > .carousel-image {
    width: 100%;
    height: 500px; 
    text-align: center;
    align: center;
}

商品代码：

#csl-item1 {
    background:url(img/carousel_image1.jpg); 
    background-repeat: no-repeat;   
    background-position: center top; 
}

项目：

<div class="item active">
  <div id="csl-item1" class="carousel-image">&nbsp;</div>
  <div class="container">
    <div class="carousel-caption">
      <!-- Caption -->
    </div>
  </div>
</div>

我很想知道是否有人对这种方法有任何错误，所以如果你认为这是一个坏主意，请告诉我......

于 2013-09-23T08:34:13.583 回答
3

我找到的最干净的解决方案是将此 css 添加到幻灯片中的图像中：

object-fit: cover; 
overflow: hidden;

您甚至可以将其内联添加到 img 标签：

<img style="object-fit: cover; overflow: hidden;" class="first-slide" src="/images/beach.jpg" alt="sunny day at the beach">

有一篇很棒的文章展示了 CSS3 属性的示例及其对图像纵横比的影响：http ://www.creativebloq.com/css3/control-image-aspect-ratios-css3-2122968

于 2016-05-20T07:21:59.513 回答
2

你有：

.carousel .item>img {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  height: 500px;
}

将高度更改为100%。

于 2013-06-05T19:39:08.623 回答
1

在 Chrome 中查看，默认的max-width: 100%似乎不是你想要的。

在您的 CSS 中，您可以添加到已定义的规则以使浏览器使用默认值。

.carousel .item > img { max-width: none }

值得注意的是，你指定min-width: 100%了一个 absolute height，所以在大屏幕上（比如我的，它是 1080p），如果它变得太宽，它仍然会扭曲图像，从而改变纵横比并再次扭曲图像。

于 2013-06-05T19:39:25.043 回答
0

好吧，我能做的就是这个……</p> 

/* Carousel base class */
.carousel {
  height: auto;
  margin-bottom: 60px;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
  z-index: 35;
}

/* Declare heights because of positioning of img element */

.carousel .item {
    background:#e64c6c;
    border:.5px solid #e7c1af;
    overflow:hidden;
    padding:3px;
    min-height: 500px; 
}
.carousel-inner > .item > img {
    float:right;
    padding: 2px;
    padding-left: 3px;
    min-width: 500px;
}

.carousel-inner > .item > img:hover {
    border: 1px solid #e7c1af;
}
于 2014-12-24T19:32:25.457 回答
0

使用引导程序 3.3.7，我可以通过简单地删除此处的“高度”行来解决此问题carousel.css：

.carousel-inner > .item > img {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  /*height: 500px;*/
}
于 2017-01-29T15:23:11.020 回答
0

在我的情况下，当屏幕尺寸增加时，图像会失真。我正在使用 Bootstrap 4制作一个启动 Bootstrap 免费模板 ( https://startbootstrap.com/ )。

根据上面来自 Ira Herman 的回答（如果我有足够的学分，我会发表评论），我最终得到了下面的代码来解决我的问题：

.carousel-item {
  height: 32rem;
  background-color: #777;
}
.carousel-item > img {
  position: absolute;
  top: 0;
  right: 0;
  min-width: 100%;
  height: 32rem;
  object-fit: cover;
  overflow: hidden;
  object-position: 20% 19%;
}

对象位置 x 和 y 坐标可以根据您希望图像增加、减少的方式进行调整。在我的情况下，从右侧调整图像也有帮助。我希望这会有所帮助。

于 2017-07-24T22:33:43.960 回答