html - 使用 css 调整图像大小以适应响应列单元格

Question

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

我已经尝试过 max-width:100% 和 max-height: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 */
}