html - 列内相等的图像高度
问题描述
我正在尝试将一些图像放在两列中。左栏中有一张图像,右栏中有两张图像。右列中的两个图像应与左侧图像具有相同的高度。我怎样才能做到这一点?
<div class="container">
<div class="row">
<div class="col-md-9">
<img class="img-responsive" src="img/2.jpg" alt="">
</div>
<div class="col-md-3">
<img class="img-responsive" src="img/4.jpg" alt="">
</div>
<div class="col-md-3">
<img class="img-responsive" src="img/4.jpg" alt="">
</div>
</div>
</div>
.hero-header{
position: relative;
}
.hero-headline {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
解决方案
只需使用您已经创建的类img-responsive并设置height:100%或您正在寻找的任何数字。像这样,所有图像肯定会有相同的高度。
推荐阅读
- python - Azure 存储 Blob (v12) Python API:在获取租约时重试
- c# - 获取 System.Data.SqlClient.SqlException (0x80131904):“OfficeOpenXml”附近的语法不正确。错误信息
- c# - 如何打开具有特定编码类型的 ShareFileClient 写入流?
- java - 如何确定给定 jar 的 org 和包含的包的名称?
- android - 在两个活动之间通过 SharedPreferences 共享两个对象列表问题:除非应用退出,否则副本似乎不同
- asp.net-core - SignInWithClaimsAsync 中的声明永久到期
- c++ - 如何解决与测试的链接问题?
- oracle - 如何为 OCI Kubernetes 集群中的服务设置静态 LoadBalancer IP?
- python - 从同一个python程序下载后如何导入python模块
- entity-framework - 对内部集合的 DbSet LINQ 查询不会引发 Argumentexception