如何在Bootstrap中保持图像大小一致？

Question

我有这四个响应的图像。但是，有时候由于窗户的大小，图像看起来并不正确。一个例子是：

如何使图像响应和保持图像的比例？

＆＃13;

＆＃13;

#books_div {
  position: absolute;
    left: 50%;
    top: 25%;
    transform: translatex(-50%);
}

#books_text {
  position: absolute;
    left: 50%;
    top: 15%;
    transform: translatex(-50%);
}

#books_div img {
  margin-bottom: 20px !important;
}

＆＃13;

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Books -->
    <h2 id='books_text'> We Giveaway Free Books </h2>
    <div class="row" id='books_div'>
            <div class="col-lg-3 col-sm-6 portfolio-item">
                <a href="#">
                    <img class='img-responsive' src="https://images.gr-assets.com/books/1474154022l/3.jpg" alt=""  style="width:200px;height:276px;">
                </a>
            </div>
            <div class="col-lg-3 col-sm-6 portfolio-item">
                <a href="#">
                    <img class='img-responsive' src="https://images.gr-assets.com/books/1328767473l/10713286.jpg" alt="" style="width:200px;height:276px;">
                </a>
            </div>
            <div class="col-lg-3 col-sm-6 portfolio-item">
                <a href="#">
                    <img class='img-responsive' src="https://images.gr-assets.com/books/1394566113l/20454074.jpg" alt="" style="width:200px;height:276px;">
                </a>
            </div>
            <div class="col-lg-3 col-md-6 portfolio-item">
                <a href="#">
                    <img class='img-responsive' src="https://images.gr-assets.com/books/1460309528l/44652.jpg" alt="" style="width:200px;height:276px;">
                </a>
            </div>
        </div>
    <!-- End of Books -->

＆＃13;

＆＃13;

＆＃13;

Answer 1

一张图片尺寸不同。

#books_div {
  position: absolute;
    left: 50%;
    top: 25%;
    transform: translatex(-50%);
}

#books_text {
  position: absolute;
    left: 50%;
    top: 15%;
    transform: translatex(-50%);
}

#books_div img {
  margin-bottom: 20px !important;
  min-height: 310px;
}

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Books -->
    <h2 id='books_text'> We Giveaway Free Books </h2>
    <div class="row" id='books_div'>
            <div class="col-lg-3 col-sm-6 portfolio-item">
                <a href="#">
                    <img class='img-responsive' src="https://images.gr-assets.com/books/1474154022l/3.jpg" alt="">
                </a>
            </div>
            <div class="col-lg-3 col-sm-6 portfolio-item">
                <a href="#">
                    <img class='img-responsive' src="https://images.gr-assets.com/books/1328767473l/10713286.jpg" alt="">
                </a>
            </div>
            <div class="col-lg-3 col-sm-6 portfolio-item">
                <a href="#">
                    <img class='img-responsive' src="https://images.gr-assets.com/books/1394566113l/20454074.jpg" alt="">
                </a>
            </div>
            <div class="col-lg-3 col-md-6 portfolio-item">
                <a href="#">
                    <img class='img-responsive' src="https://images.gr-assets.com/books/1460309528l/44652.jpg" alt="">
                </a>
            </div>
        </div>

Answer 2

使用宽高比

尝试此操作

 <!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
//Image here
</div>

<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
 //Image here
</div>

Answer 3

要使图像响应，您需要将图像设置为width: 100%并保持height属性不变。这样，图像将保持其比例，但随着容器越来越小，它们的高度会降低。

您可以做的另一件事是将这些图像设置为background-image和background-size: cover。这样，您可以将height设置为固定数量，并且图像不会失真 - 但它们会被裁剪掉以适应可用的容器空间。