<分区>
编辑问题以包含 desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem .这将有助于其他人回答问题。
关闭 7 年前。
html - CSS 调整图像大小以适应容器
我想像这样将图像放入具有不同图像大小的容器中:
示例:
<强>1。全尺寸装在更大尺寸的容器中。
<强>2。在水平尺寸的容器中居中。
<强>3。在垂直尺寸的容器中居中。
查看此 link 中的示例
最佳答案
正如Gautam所说，你需要使用
max-height:100%;
max-width: 100%;
所以你可以为容器定义一个类
.container
{
display:flex;
align-items:center;
justify-content:center;
border:1px solid black;
background-color: #ffffff;
width: 50px;
height: 50px;
}
还有一个图像类
.maxsize
{
max-height:100%;
max-width: 100%;
}
display:flex; 属性使容器更易于配置，因此您可以更快地将内容居中。您可以删除 border 属性，这只是为了更容易查看容器边缘。
希望对您有所帮助。
关于html - CSS 调整图像大小以适应容器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34917791/