Question

我的页面上有一堆卡片，我很难将它们设置为相同大小。我正在使用Materialize CSS。This is how they are now 我如何使它们达到相同的尺寸？

``<div class="valign-wrapper">
      <div class="container">
        <div class="row">
          <div class="col s12 m3">
            <div class="card">
              <div class="card-image">
                <img src="img/4.jpg" class="responsive-img">
              </div>
              <div class="card-content">
                <p>I am a very simple card. I am good at containing small bits of information. I am convenient because I
                  require little markup to use effectively.</p>
              </div>
              <div class="card-action">
                <a href="#">This is a link</a>
              </div>
            </div>
          </div>
          <div class="col s12 m3">
            <div class="card">
              <div class="card-image">
                <img src="img/4.jpg" class="responsive-img">
              </div>
              <div class="card-content">
                <p>I am a very simple card. I am good at containing small bits of information. I am convenient because I
                  require little markup to use effectively.</p>
              </div>
              <div class="card-action">
                <a href="#">This is a link</a>
              </div>
            </div>
          </div>
          <div class="col s12 m3">
            <div class="card">
              <div class="card-image">
                <img src="img/4.jpg" class="responsive-img">
              </div>
              <div class="card-content">
                <p>I am a very simple card. I am good at containing small bits of information. I am convenient because I
                  require little markup to use effectively.</p>
              </div>
              <div class="card-action">
                <a href="#">This is a link</a>
              </div>
            </div>
          </div>
          <div class="col s12 m3">
            <div class="card">
              <div class="card-image">
                <img src="img/blogo.jpg" class="responsive-img">
                <span class="card-title black-text">Card Title</span>
              </div>
              <div class="card-content">
                <p>I am a very simple card. I am good at containing small bits of information. I am convenient because I
                  require little markup to use effectively.</p>
              </div>
              <div class="card-action">
                <a href="#">This is a link</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div> ``

这是我的主要index.html文件的外观吗？以及我将如何解决此问题。谢谢

Answer 1

可以更改CSS

.card-image{ height: 300px; //or however you want it width:auto; //so that the image ratio stays the same }

Answer 2

在一个单独的CSS文件中，覆盖物化文件，您可以使用固定的高度或最小高度。

<pre>
    .card-image {
       height: 465px;
    }

    // alternatively...

    .card-image {
       min-height: 465px;
    }
</pre>

Answer 3

将图像缩放为背景。

<div class="card-image" style="background-image: url('img/4.jpg');"></div>

在CSS中

.card-image {
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  width: 300px;
  height: 300px;
}

Answer 4

我认为这里最简单的解决方案是在photoshop或任何其他类似的程序中手动将所有图像设置为相同大小。

在CSS中更改卡片大小

4 个答案: