Question

我正在创建一个包含3行的图库，每行包含3个图像，使用Bootstrap网格系统。所有图像都有不同的大小。我想要做的是使所有图像大小相同。我试图在我的CSS中使用max-height或max-width，但它没有帮助使所有图像（缩略图）大小相似。我应该获得缩略图类的装备还是有其他解决方案？

body {
      padding-top: 70px;}
    .row .flex {
     display: inline-flex;
     width: 100%;}
    img {
     width:100%;
     min-height:100px;}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row match-to-row">
      <div class="col-lg-4 col-sm-6">
        <div class="thumbnail">
           <img src="https://source.unsplash.com/eKTUtA74uN0" alt="">
        </div>
      </div>
      <div class="col-lg-4 col-sm-6">
        <div class="thumbnail">
           <img src="https://source.unsplash.com/x-tbVqkfQCU" alt="">
        </div>
      </div>
      <div class="col-lg-4 col-sm-6">
        <div class="thumbnail">
           <img src="https://source.unsplash.com/cjpGSEkXfwM" alt="">
        </div>
      </div>

      <div class="row match-to-row">
        <div class="col-lg-4 col-sm-6">
          <div class="thumbnail">

            <img src="https://source.unsplash.com/63JKK67yGUE" alt="">
          </div>
        </div>
        <div class="col-lg-4 col-sm-6">
          <div class="thumbnail">

            <img src="https://source.unsplash.com/YP6lDrlxWYQ" alt="">
          </div>
        </div>
        <div class="col-lg-4 col-sm-6">
          <div class="thumbnail">

            <img src="https://source.unsplash.com/NqE8Ral8eCE" alt="">
          </div>
        </div>

        <div class="row flex match-to-row">
          <div class="col-lg-4 col-sm-6">
            <div class="thumbnail">

              <img src="https://source.unsplash.com/6oUsyeYXgTg" alt="">
            </div>
          </div>
          <div class="col-lg-4 col-sm-6">
            <div class="thumbnail">

              <img src="https://source.unsplash.com/WF2lvywxdMM" alt="">
            </div>
          </div>
          <div class="col-lg-4 col-sm-6">
            <div class="thumbnail">

              <img src="https://source.unsplash.com/2FdIvx7sy3U" alt="">
            </div>
          </div>
    </div>
  </div>

Answer 1

我认为您正在寻找的属性是object-fit

img {
    width: 200px; /* You can set the dimensions to whatever you want */
    height: 200px;
    object-fit: cover;
}

object-fit属性与在背景图片上使用background-size: cover的方式类似，使其无需拉伸即可填充页面。这样，您可以在规则中定义所有图像将遵循的宽度，以确保它们的大小相同而不会扭曲您的图片。

您可以使用此属性的其他值包括：

fill - 拉伸图片。
contain - 保留图像的宽高比。
cover - 填充框的高度和宽度。
none - 保持原始尺寸。
scale-down - 比较none和contains之间的差异，找出最小的对象大小。

object-fit | CSS-Tricks

Answer 2

为每个图像添加对css类img-responsive。

Answer 3

只需修改一下：

Caused by: org.apache.spark.SparkException: This RDD lacks a SparkContext. It could happen in the following cases: 
(1) RDD transformations and actions are NOT invoked by the driver, but inside of other transformations; for example, rdd1.map(x => rdd2.values.count() * x) is invalid because the values transformation and count action cannot be performed inside of the rdd1.map transformation. For more information, see SPARK-5063.
(2) When a Spark Streaming job recovers from checkpoint, this exception will be hit if a reference to an RDD not defined by the streaming job is used in DStream operations. For more information, See SPARK-13758.

Answer 4

在浏览器中转到“检查元素”，然后查找以下内容：

.thumbnail a>img, .thumbnail>img {
    display: block;
    width: 100%;
    height: auto; }

将其更改为：

.thumbnail a>img, .thumbnail>img {
    display: block;
    width: 100%;
    height: 300px; //change as per your requirement }

Answer 5

Bootstrap的网格系统使用一系列容器，行和列来布局和对齐内容。顶层是Container，在其下方显示行和列。在Bootstrap中，有4个类 xs （适用于手机-屏幕宽度小于768像素） sm （对于平板电脑-屏幕宽度等于或大于768像素） md （对于小型笔记本电脑-屏幕宽度等于或大于992px） lg （适用于笔记本电脑和台式机-屏幕宽度等于或大于1200像素）

如何确定列显示：一页分为12列网格，宽度计算为宽度：百分比（（@columns / @ grid-columns））; 1列/ 12个网格列= 8.33％* 1170px = 97.5px 没有部分像素，因此浏览器将数字四舍五入。 col-md-2 -将连续显示6张图像。 2表示2列以显示图像

col-sm-12 -类在小型设备上打开时将有助于堆叠图像

.img-center -是自定义类，用于为图像框定义其他属性希望这会有所帮助。

<div class="cards-list">

<div class="card 1">
  <div class="card_image"> <img src="https://i.redd.it/b3esnz5ra34y.jpg" /> </div>
  <div class="card_title title-white">
    <p>{{listData.date | date: 'd MMM yyyy'}}</p>
  </div>
</div>

</div>

.img-center {
  text-align: center; 
  border-radius: 8px;
  width: 100px;
  background-color: white;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15), 0 2px 3px 0 rgba(0, 0, 0, 0.1);
}
.row {
  display: flex;
  margin: auto;
}

在引导网格

5 个答案: