logo标签列表

如何使用CSS调整图片大小而不影响图片质量

htmlcsstwitter-bootstrap-3
11

我有一个使用Bootstrap制作的轮播图，以下是代码；如何调整该图片的大小以完全填充轮播图，同时不失去图片质量，并确保图片高度不超过轮播图的宽度或高度？image

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.1/css/bootstrap.min.css" rel="stylesheet"/>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active" style="width:400px;">
      <img class="d-block w-100" src="{{articles.image.url}}" alt="First slide" style=" width:100%;height:auto;">
      <div class="carousel-caption d-none d-md-block">
        <h5>Latest</h5>
        <p>{{articles.title}}</p>
      </div>
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide">{% lorem 1 p %}
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=555&fg=333&text=Third slide" alt="Third slide">{% lorem 1 p %}
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

2
至少可以提供一个可工作的代码片段，而不是直接复制你的代码。 - Rainbow
6个回答
17

在你的 CSS 中使用 "object-fit" 属性，并给你的图像标签或相应的类指定固定的宽度和高度，这样每个图像都将具有相同的宽度和高度，现在你的图像将不会被扭曲。

 .d-block w-100 {
   width:100%;
   height:550px;
   object-fit:cover;
   object-position:50% 50%;
  }
3
您可以将图像的宽度设置为100%，高度设置为自动。
我已经完成了这个，但高度太大了，仍然超出了范围，我只想让它保持轮播图的高度。 - ade desmond
1
尝试通过设置最大高度来减小图像容器的高度。 - Friday Ameh
1

旧代码：

<div class="carousel-inner">
    <div class="carousel-item active" style="width:400px;">
      <img class="d-block w-100" src="{{articles.image.url}}" alt="First slide" style=" width:100%;height:auto;">
      <div class="carousel-caption d-none d-md-block">
        <h5>Latest</h5>
        <p>{{articles.title}}</p>
      </div>
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide">{% lorem 1 p %}
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=555&fg=333&text=Third slide" alt="Third slide">{% lorem 1 p %}
    </div>
  </div>

使用以下代码编辑carousel-item：

width: 100%;
height: auto;
我正在按照你说的去做，但是高度仍然没有减少，因为它将轮播图的高度延伸到了底部。 - ade desmond
嗨。如果需要的话，你可以给你的轮播图添加max-height属性。然后指定你想要的轮播图的确切高度，你可以使用多种单位进行设置，例如像素(px)、字号(em)、根元素字号(rem)等。 - billy.farroll
1
另一种选择是使用CSS背景图像而不是img标签，并使用background-size cover属性，该属性在浏览器支持方面比img object fit属性更好。
<div class="carousel-item" style="background: url('')"></div>

.carousel-item{
    height: 500px;
    background-color: #000;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
0

我的之前的图像尺寸为960px * 720px，我将其用作标志。这在缩小大小而不拉伸方面起作用。

使用CSS选择器指向该图像并调整高度。

{ height: 100px;}

宽度的默认值为auto。 根据您的目标，您可以调整高度的值。

0

我遇到了同样的问题，我通过添加“d-flex”和“justify-content”来将图像居中，就像这样：

<div class="slide-control d-flex justify-content-center">

然后我使用了那些CSS属性

.slide-image {
    width: auto;
    height: 870px; 
   }
   .slide-control{
    margin: 40px 177px 0 177px;
   }

你应该在 .slide-control 类内使用 margin，否则幻灯片将会滑到左侧的末端。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接