我创建了两列，它们并排浮动。左列显示文本，右列将显示图像。我一直很难找到合适的代码来将我的图像放在正确的列中。
我一直在列div本身的图像周围放置一个div，看起来我在绕圈子。我也希望图像保持其比例。
有人能解释一下CSS哪里出了问题吗？
<!DOCTYPE html>
<!--[if lt IE 7 ]><html lang="en" class="ie6"> <![endif]-->
<!--[if IE 7 ]><html lang="en" class="ie7"><![endif]-->
<!--[if IE 8 ]><html lang="en" class="ie8"><![endif]-->
<!--[if IE 9 ]><html lang="en" class="ie9"><![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--><html lang="en"><!--<![endif]-->
<head>
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
height: 100%;
background-color:#ffffff;
overflow-x: hidden; /* Hide horizontal scrollbar */
}
html {
width: 100vw;
scroll-behavior: smooth;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
h1 {
font-family: prestige-elite-std, monospace;
font-weight: bold;
font-size: 35px;
padding: 15px 0 50px 15px;
}
.p1 {
font-family: prestige-elite-std, monospace;
font-weight: bold;
font-size: 20px;
font-style: italic;
padding: 0 0 18px 0px;
}
.p2 {
font-family: prestige-elite-std, monospace;
font-size: 18px;
padding: 0 0 10px 0px;
}
#wrapper{
background-color:#ccc2c2;
width: 100%;
max-width: 1200px;
position: relative;
margin: 0 auto;
padding: 5px 0;
}
#content {
padding: 5px 0 5px 0 ;
position: relative;
overflow: hidden;
}
.container {
position:relative;
clear: both;
width: 100%;
max-width: 1200px;
padding: 5px 0px 5px 0px;
overflow: hidden;
background-color: #ffffff;
}
.column1 {
float: left;
width: 30%;
padding: 10px;
height: 300px;
background-color:#fff;
position: relative;
border: 1px solid #000;
}
.column1 div.col1content {
position: absolute;
bottom: 60px;
}
.column2 {
float: left;
width: 70%;
padding: 10px;
height: 550px;
background-color:#fff;
border: 1px solid #000;
}
.img-container {
max-width: 100%;
max-height: 100%;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="content">
<div class="container">
<div class="row">
<div class="column1">
<div class="col1content">
<p class="p1">Text</p>
<p class="p2">Text</p>
<p class="p2">Text</p>
<p class="p2">Text</p>
</div>
</div>
<div class="column2">
<div class="img-container">
<img src="https://s3-eu-west-1.amazonaws.com/graphicalhouse-collective/SP19_poster_crop_2.png">
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
我想试着设置图像宽度100%
我会删除整个.img-conteiner选择器，然后键入它来代替
img{
max-height: 480px;
}
代码中没有任何内容与实际图像交互。所以我认为这会有所帮助，但如果你如果要更改右栏的大小，那么也需要更改图像的大小。
这仍然不是一个完美的匹配，因为列和图像的比例不一样，但现在整个图像都是可见的。