使用css

Question

我使用自适应列格式来创建我的移动网站。每列的内容是使用我希望填充100％宽度并自动调整高度的图像形成的。

我尝试过最大宽度：100％和最大高度：100％并且它不会将图像宽度填充到列区域的100％。此解决方案调整列高以调整图像大小，但不会调整图像大小以满足100％的列宽。

源代码：

<div class="container">
    <div class="column" id="column1">
        <img id="top_block_graphic" src="graphics/top-block.png" alt=""/>
    </div>
</div>

CSS：

.container {
display: grid;
grid-template-columns: 50% 50%;
grid-gap: 7px;
clear: both;
padding: 10px;
font-size: 1.6em;
width: 100%;
}

.column {
background-color: rgba(173,167,133,0.5);
padding: 10px;
border: 1px solid black;
}

#column1 {
grid-column: 1/3;
width: 100%;
height: auto;
position: relative;
overflow: hidden;
padding: 35.66% 0 0 0;
}

#top_block_graphic {
display: block;
max-width: 100%;
height: auto;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}

Answer 1

试试这个：

#column1 {
  width: 100% !important;
  height: auto !important;
}

或者这个：

#column1 {
  width: 100vw !important;
  height: auto !important; /* 100vh */
}