调整背景图像

我想响应（全角！）对齐三个背景图像+文字。这里是布局：调整背景图像

******************************************************** 
*       *       * 
*       * background 2 (width 50%) * 
*       *       * 
* background 1 (width 50%) **************************** 
*       *       * 
*       * background 3 (width 50%) * 
*       *       * 
********************************************************

无论我做什么，我不能设法做到这一点。我到处搜索，找不到解决方案。有人可以帮忙吗？要求是这个块总是保持相同的高度，没有固定的宽度导致它必须响应（当浏览器调整大小时图像会相应缩小），并且在移动时它应该变成三行。在每个背景上，我需要添加不同数量的文本，但整个块必须始终保持相同的高度！另外我不想使用JavaScript，是否有可能完成此只有HTML/CSS和维护浏览器兼容性？

请帮忙！

谢谢！

来源

2016-09-20 wpdev

什么是不想使用JavaScript的原因是什么？ –

原因我只在可能的情况下才喜欢使用HTML/CSS。是吗？ – wpdev

.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需要...

来源

2016-09-20 08:43:29 ziaulain

谢谢！它会部分工作（您的第二个示例），因为您需要为每个背景添加最小高度，唯一的问题是我需要在浏览器缩小时使用媒体查询来更改最大高度。是否有其他方法可以在不强制最小高度的情况下完成此操作，但仍然保持图像的纵横比？例如：如果大图像是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>

来源

2016-09-20 09:03:38

此解决方案不响应 – wpdev

单击完整页面按钮并查看它是否足够响应。 –

这不是，图片高度总是200px，当宽度变化时我需要它改变 – wpdev

调整背景图像

回答

相关问题