我有两个不等的响应列,右侧较小的是文本,左侧较大的列是图像。当我调整浏览器窗口大小以查看列如何适合页面时,它可以正常工作,直到达到最大宽度700px并彼此堆叠。底列很好,但是顶部(图像(并不显示完整的图像,仅显示页面宽度的微小条带。如何使其自动调整高度以显示完整图像?
我尝试在左列上设置为自动设置高度,但这不起作用,它继续显示一个小条。
.column {
float: left;
padding: 10px;
height: 300px;
}
.left {
width: 60%;
background-image: url('http://i.imgur.com/k5gf0zz.jpg');
background-size: cover;
background-position: center;
}
.right {
width: 40%;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 700px) {
.column {
width: 100%;
}
}
<body>
<div class="row">
<div class="column left";>
</div>
<div class="column right" style="background-color:#FDE4EC;">
<center> <p><font size="8">We Provide Quality Skin Care</font></p>
<p style = "font-family: Verdana, Geneva, sans-serif">Let us help you feel beautiful!</p>
<br>
<button class="button2"><b>BOOK NOW</b></button> </center>
</div>
</div>
</body>
任何帮助都将不胜感激:(
img{
max-width:100%;
height:auto;
display:none;
}
.left {
width: 60%;
background:url("http://i.imgur.com/k5gf0zz.jpg") no-repeat center;
background-size:cover;
}
.right {
width: 40%;
padding: 10px 0px;
}
.row{
display:flex;
flex-wrap:wrap;
}
@media screen and (max-width: 700px) {
.column {
width: 100%;
}
img{
display:block;
}
.left {
background:none;
}
}
<div class="row">
<div class="column left";>
<img src="http://i.imgur.com/k5gf0zz.jpg">
</div>
<div class="column right" style="background-color:#FDE4EC;">
<center> <p><font size="8">We Provide Quality Skin Care</font></p>
<p style = "font-family: Verdana, Geneva, sans-serif">Let us help you feel beautiful!</p>
<br>
<button class="button2"><b>BOOK NOW</b></button> </center>
</div>
</div>
尝试使用max-width:100%
和height:auto
添加IMG,用于小屏幕,并使用background
用于大屏幕!
删除高度并添加最小值
.left {
min-height: auto;
}
感谢您的主题,我同意克里斯的观点,如果我们有更多信息,就可以更容易地知道如何提供帮助。您还可以在HTML文件中使用类似的内容,两个大小不同的图片,并为每个页面大小使用特定图片。
<picture id="pic">
<source media="(min-width: 650px)" srcset="image.jpg">
<img src="image2.jpg" alt="same pic bigger size" style="width:auto;">
</picture>