Question

我正在使用materializecss框架试验一些效果。当用户将鼠标悬停在卡片上时，我试图调整图片和内容的大小，但似乎无法破解它。

.card:hover .card-image {
    height: 50%;
}

.card:hover .card-content {
    height: 50%;
}

<div class="row">
    <div class="col s12 m7">
        <div class="card">
            <div class="card-image">
                <img src="http://lorempixel.com/640/480/nightlife/">
                <span class="card-title">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>
    </div>
</div>

不幸的是，我无法让这个工作。我已经将高度变化应用于img，卡片内容中的元素，卡类等，但似乎没有给出。

Answer 1

试试这个：

.card:hover .card-image img {
    width: 50%;
}

滚动页面的高度很棘手，你可能想要点击图像，而不是div，除非你还想设置ovrflow: hidden如果你试图裁剪图像？由于.card.content不确定您要实现的目标......也许font-size: 50%？

高度和宽度百分比是相对于父元素的，而不是应用样式的元素..因此宽度为50％的图像是其父级宽度的50％，而不是源文件的宽度。。如果我的回忆是正确的。

<强> DEMO

调整卡片上的图像和内容大小

1 个答案: