html - Html/CSS 大小的图像

Question

我想以相同的固定尺寸显示照片（我使用 carieerwave 通过表单添加）： 带有 image 的文章。

这是我的代码：

<div class="section">
    <div class="container">
        <% @posts.take(4).each do |post| %>
          <div class="carda"  style="width: 500px; float:left; margin: 20px; height: 430px;">
            <div class="card-content">
              <%= link_to image_tag(post.image_url, width: 500, height: 250), post %>
              <p class="title" style="margin-top: 5px; color:black">
      <%= raw link_to post.title, post  %>
              </p>
            </div>
          </div>
      <% end %>
    </div>
</div>

我不知道为什么他们有其他尺寸

标签： htmlcssruby-on-rails

Answer 1

我会说在这种情况下，如果高度不同，您只想拥有相同尺寸的图像。否则你会得到这个：

.card-container {
  display: flex;
  justify-content: space-between;
}

.card {}

.card-image {
  width: 150px;
  height: 150px;
}

.card-image img {
  display: block;
  width: 100%;
}


/* Alternative with BG images */

.card-image-bg {
  width: 150px;
  height: 150px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.card:first-of-type .card-image-bg {
  background-image: url("http://via.placeholder.com/350x150");
}

.card:nth-of-type(2) .card-image-bg {
  background-image: url("http://via.placeholder.com/250x190");
}

.card:last-of-type .card-image-bg {
  background-image: url("http://via.placeholder.com/400x400");
}

<div class="section">
  <div class="card-container">
    <div class="card">
      <div class="card-image"><img src="http://via.placeholder.com/350x150"></div>
      <p class="title">Image 1 caption 1</p>
    </div>
    <div class="card">
      <div class="card-image"><img src="http://via.placeholder.com/250x190"></div>
      <p class="title">Image 2 caption 2</p>
    </div>
    <div class="card">
      <div class="card-image"><img src="http://via.placeholder.com/400x400"></div>
      <p class="title">Image 3 caption 3</p>
    </div>
  </div>
</div>

<div class="section">
  <div class="card-container">
    <div class="card">
      <div class="card-image-bg"></div>
      <p class="title">Image 1 caption 1</p>
    </div>
    <div class="card">
      <div class="card-image-bg"></div>
      <p class="title">Image 2 caption 2</p>
    </div>
    <div class="card">
      <div class="card-image-bg"></div>
      <p class="title">Image 3 caption 3</p>
    </div>
  </div>
</div>