HTML / CSS размер изображения

Question

Я хочу отображать фотографии в том же фиксированном размере (который я добавил через форму, используя carieerwave): статьи с изображением .

Это мой код:

<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>

Не знаю, почему у них другие размеры

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>