html - 图像未填充包含元素
问题描述
我有一个设计,页面分为两部分,左侧包含图像,右侧包含一些文本。
问题是图像没有填充左侧。
通常我可以通过在图像中添加显示“块”来解决这个问题,但这一次没有帮助。
在这里可以看到页面的代码: https ://codepen.io/Lavonen/pen/vbOqdd
<!-- Left side -->
<div class="row">
<div class="column" style="background-color:#fff;">
<div class="image">
<img src="http://oncokdm.com/assets/barre.png" width="75%" height="auto" />
<img src="https://images.drivereasy.com/wp-content/uploads/2018/06/img_5b19100729335.jpg" width="75%" height="auto" />
</div>
</div>
<!-- Right side -->
<div class="column" style="background-color:#fff; text-align: left;">
<div class="content">
<div class="head">blablalba blablabla blablalba</div>
<div class="subh">blablalba blablabla blablalba blablalba blablabla blablalba blablalba blablabla blablalba blablalba blablabla blablalba blablalba blablabla blablalba blablalba blablabla blablalba blablalba blablabla blablalba</div>
</div>
</div>
</div>
CSS:
.column
{
float: left;
width: 48%;
padding: 10px;
height: 100vh;
}
.column .image
{
margin-top: 22vh;
border: 1px solid #000;
}
.column .content
{
margin: 40vh 10vw 0 0;
}
.row:after
{
content: "";
display: table;
clear: both;
}
.column .content .head
{
margin: 25px 0 30px 0;
font-size: 1.3em;
font-family: 'Roboto', sans-serif;
color: #4a4a4a;
font-weight: 300;
}
.column .content .head:after {
content: '';
position: absolute;
display: block;
margin-top: 15px;
width: 40px;
height: 2px;
background: #004c71;
}
.column .content .subh
{
font-size: 1em;
font-family: 'Roboto', sans-serif;
color: #a8a8a8;
font-weight: 200;
line-height: 1.4;
}
@media screen and (max-width: 600px)
{
#section3 .column {
width: 100%;
}
}
解决方案
这显然是因为,你有width="75%"
,这限制了它。让它width="100%"
。
<div class="image">
<img src="http://oncokdm.com/assets/barre.png" width="100%" height="auto" />
<img src="https://images.drivereasy.com/wp-content/uploads/2018/06/img_5b19100729335.jpg" width="100%" height="auto" />
</div>
这样做看起来是这样的:
代码笔: https ://codepen.io/anon/pen/pGJMwN
另一种方法是给图片加边框,但是需要处理浮动和布局,所以我觉得上面的方案比较好。
推荐阅读
- spring-integration - Spring Integration Poller 在没有应用程序重启的情况下无法在 Pivotal Cloud Foundry 中工作
- asp.net-mvc - MVC,以表格形式获取现有数据的编辑视图问题
- node.js - Node JS 和 Mongodb
- kotlin - Kotlin map:获取关联值
- kubernetes - 使用污点标签在主节点上部署 helm
- amazon-web-services - CodePipeline 中的 AWS CodeCommit 权限错误
- powershell - 如何将 Get- 命令中的对象放入列表/数组中?
- javascript - Node.JS - @hapi/joi - any.when() - 无法在“then 条件”处添加 .validate()
- go - 在 Go 中获取 Transport 的连接数
- python - Scrapy 忽略拒绝规则