I have a bunch of cards on my page, i am having a hard time getting them to the same size. I am using Materialize CSS. This is how they are now How do i get them to the same size?
``<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> ``
This is what my main index.html file looks like? And how would i fix the issue for the future. Thank You
可以改变CSS
.card-image{ height: 300px; //or however you want it width:auto; //so that the image ratio stays the same }
In a separate CSS file to override materialize file, you can use a fixed height or a min-height.
<pre>
.card-image {
height: 465px;
}
// alternatively...
.card-image {
min-height: 465px;
}
</pre>
Scale the images as background.
<div class="card-image" style="background-image: url('img/4.jpg');"></div>
In Css
.card-image {
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: cover;
width: 300px;
height: 300px;
}
我认为这里最简单的解决方案是在photoshop或任何其他类似程序中手动使所有图像大小相同。
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.