调整背景图像
问题描述:
我想响应(全角!)对齐三个背景图像+文字。 这里是布局:调整背景图像
********************************************************
* * *
* * background 2 (width 50%) *
* * *
* background 1 (width 50%) ****************************
* * *
* * background 3 (width 50%) *
* * *
********************************************************
无论我做什么,我不能设法做到这一点。我到处搜索,找不到解决方案。有人可以帮忙吗?要求是这个块总是保持相同的高度,没有固定的宽度导致它必须响应(当浏览器调整大小时图像会相应缩小),并且在移动时它应该变成三行。在每个背景上,我需要添加不同数量的文本,但整个块必须始终保持相同的高度! 另外我不想使用JavaScript,是否有可能完成此只有HTML/CSS和维护浏览器兼容性?
请帮忙!
谢谢!
答
.img-container {
width:50%;float:left;
}
.img {
width: 100%;
}
<div class="img-container">
<div>Text here with styling</div>
<img class="img" src="img-link"></img>
</div>
<div class="img-container">
<div>Text here with styling</div>
<img class="img" src="img-link"></img>
<div>Text here with styling</div>
<div class="img" src="img-link"></div>
</div>
调整上述图像的文本u需要...
+0
谢谢!它会部分工作(您的第二个示例),因为您需要为每个背景添加最小高度,唯一的问题是我需要在浏览器缩小时使用媒体查询来更改最大高度。是否有其他方法可以在不强制最小高度的情况下完成此操作,但仍然保持图像的纵横比?例如:如果大图像是1000x900,较小图像是1000x450,我希望它缩小到视口当前尺寸。可能吗? – wpdev
答
希望这对你的作品。
#wrapper {
width: 100%;
float: left;
}
#left {
float: left;
width: 50%;
height: 200px;
background: red;
}
#right {
float: left;
width: 50%;
height: 200px;
}
#right div {
height: 50%;
}
#right div:first-child {
background: blue;
}
#right div:last-child {
background: orange;
}
<div id="wrapper">
<div id="left">background 1</div>
<div id="right">
<div>background 2</div>
<div>background 3</div>
</div>
</div>
什么是不想使用JavaScript的原因是什么? –
原因我只在可能的情况下才喜欢使用HTML/CSS。是吗? – wpdev