Question

如何使所有图像保持相同的大小，同时让它们保持响应？

这是小提琴：

这就是所有的css：

.ui.text.menu {
   background-color: #eee;
   margin-top: 0;
}

.ui.message {
   padding: 50px 50px;
   margin-bottom: 20px !important;
}

.ui.grid.stackable.container {
    display: flex;
    flex-wrap: wrap;
}

Answer 1

检查Demo。它可能会帮助你

CSS

img.ui.image{

  max-width: 100%;
  height: auto;
  max-height: 100px;
  margin: auto;
  display: block;
}
.ui.segment {
  width: 100%;
}

Answer 2

检查this小提琴。你可以在你的ui段中放置一个包装器div，让你的图像可以放入，然后给那个包装器一个高度和宽度，然后添加object-fit：cover到css中的img元素，宽度和高度为100％。

＆＃13;

body {
  margin: 0;
  display: flex;
}

.segment {
  width: 30%;
  border: 1px solid black;
  padding: 10px;
  margin: 10px;
}

.seg-img {
  height: 80%;
  width: 100%;
}

img {
  object-fit: cover;
  height: 100%;
  width: 100%;
}

＆＃13;

<div class="segment">
  <div class="seg-img">
    <img src="https://images.unsplash.com/photo-1464061884326-64f6ebd57f83?auto=format&fit=crop&w=1500&q=80">
  </div>
  <p>TEST</p>
</div>

<div class="segment">
  <div class="seg-img">
    <img src="https://images.unsplash.com/photo-1440658172029-9d9e5cdc127c?auto=format&fit=crop&w=1652&q=80">
  </div>
  <p>TEST</p>
</div>

<div class="segment">
  <div class="seg-img">
    <img src="https://images.unsplash.com/photo-1474015833661-686ed67f9485?auto=format&fit=crop&w=1500&q=80">
  </div>
  <p>TEST</p>
</div>

＆＃13;

Answer 3

我刚刚更新了小提琴

在较小的视口上拉伸的图像已经修复

检查此fiddle

我刚刚在css中改变了

    img.ui.image{
    overflow: hidden;
    width: 100%;
    max-width: 50%;
    height: auto;
    max-height: 100px;
    margin: auto;
    display: block;
}

CSS - 等大小的图像

3 个答案: