自适应CSS将图像扩展到一侧
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了自适应CSS将图像扩展到一侧相关的知识，希望对你有一定的参考价值。
我正在尝试实现以下布局（请注意，图像上方和下方都有文本/内容：]
主要内容/行为灰色。最大宽度为800px，居中。如何使图像与主div靠左对齐，但在浏览器窗口末尾有100％的溢出/拉伸向右对齐？如果没有JS，我正在寻找仅CSS解决方案。
body
text-align: center;
.main
width: 100%;
max-width: 800px;
margin: 0 auto;
padding: 0 15px;
position: relative;
overflow: visible;
img
width: 100%;
position: absolute;
left: 0;
<div class="main">
<img src="https://via.placeholder.com/300x100" />
</div>但无法使其正常工作。请注意，布局是响应式的。
答案
您需要在相对位置和隐藏位置放置一个父对象，并且您的图像在父对象中的位置绝对是这样的：
<!DOCTYPE html>
<html>
<head>
<style>
body
text-align: center;
img
background-color: blue;
width: 100%;
height:200px;
position:relative;
margin:1px;
right:0;
.main
width: 100%;
max-width: 400px;
background-color : red;
margin: 0 auto;
height:800px;
.parent
position : relative;
margin : 0;
padding:0;
visibility : hidden;
.child
visibility:visible;
position:absolute;
width:120%;
margin:0;
left:0;
p
height: 50px;
</style>
</head>
<body>
<div class="main">
<p></p>
<div class="parent">
<img class="child" src="" />
</div>
</div>
</body>
</html>另一答案
请尝试一下
.main
max-width:800px;
background:grey;
margin:0 auto;
img
width:100%;
height:100%;
<div class="main">
<img src="https://via.placeholder.com/300x100"></img>
</div>以上是关于自适应CSS将图像扩展到一侧的主要内容，如果未能解决你的问题，请参考以下文章