css - 制作适合所有内容的卡片
问题描述
我想在我的新闻网站(学校项目)的移动版本上制作 8 张卡片。我希望卡片都具有相同的比例,但是,我为卡片保存在计算机上的图像大小有所不同(其中一些更高)。
有没有办法让图像、标题和文本都适合卡片,而无需在将每个图像添加到项目之前调整其大小?
代码:
img {
max-width: 100%;
max-height: 100%;
display: block;
}
.cards {
display: flex;
flex-direction: column;
justify-content: space-between;
margin: 5px;
}
.card{
display: flex;
flex-direction: column;
padding: 5px;
margin: 20px;
margin-bottom: 5px;
height: 280px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
解决方案
只需给您的图像一个高度值,该值是您希望图片达到的最高值。您必须将宽度设置为自动以避免拉伸图片。
img {
height: 300px; /* play around with this number until you get the height you need */
width: auto;
max-width: 100%;
}
推荐阅读
- javascript - 在浏览器中使用 webpack externals 会导致“require is not defined”错误
- python - 如何修复excel文件中的双重数据输入
- javascript - 从作为 html 代码的 javascript 字符串中获取 tr 值
- c++ - C++、C2447 '{':缺少函数头(旧式格式列表?)、win32 和 long
- c++ - 为什么我在这里得到 Sigabrt
- r - 如何设置适当的当前人口调查调查重复权重设计?
- javascript - Firebase 身份验证和 Google 登录
- python - 如何创建计算后返回值的 WTF 表单和烧瓶?
- r - 将 SQL 代码块包含到 R 脚本中以转换为 Markdown 报告
- asp.net - 将事件侦听器附加到 Microsoft.IdentityModel.Logging