如何以固定大小的 100x100 div 显示任意大小的图像？
Lea*_*AKS 7 html css size image
我想以固定大小（100 像素 x 100 像素）的 div 显示任何大小（不同的宽度和高度）的图像，而不改变其纵横比。我还想将图像与 div 内的中心对齐。我做了它，但除非我改变它的纵横比，否则具有不同宽度和高度（第 6 个）的图像不会居中。
<html>
<style>
.A{
border:1px dotted black;
display:inline-block;
}
.B{
border:1px solid black;
display:inline-block;
width: 100px;
height:100px;
overflow:hidden;
}
.C{
border:1px solid black;
display:inline-block;
width: 100px;
height:100px;
overflow:hidden;
}
</style>
1
<div class="A">
<img src="man-profile.png">
</div>
2
<div class="B">
<img src="man-profile.png">
</div>
3
<div class="B">
<img src="man-profile.png" style="width:100;">
</div>
4
<div class="C">
<img src="picture.png" style="width:100;">
</div>
5
<div class="C">
<img src="picture.png" style="height:100;">
</div>
6
<div class="C">
<img src="picture.png" style="height:100; width:100%">
</div>
</html>
下面附上图片：
使用max-width和max-height向img在CSS标签。
img {
display: block;
max-width:180px;
max-height:180px;
width: auto;
height: auto;
}<img width="400" height="400" src="http://i.stack.imgur.com/aEEkn.png">图像的原始大小为 400x400 像素，但您可以通过 CSS 调整其大小，而不会更改纵横比。 <img width="400" height="400" src="http://i.stack.imgur.com/aEEkn.png">
另一种选择：
如果要将父级添加div到图像，则可以执行以下操作：
.container {
width: 100px;
}
.container img {
display: block;
width: 100%;
height: auto;
}<div class="container">
<img width="400" height="400" src="http://i.stack.imgur.com/aEEkn.png">
</div>请改用背景图像。当您需要一个图像来覆盖整个 div 并且不改变宽高比时，这是最简单的。
element {
background-repeat:no-repeat;
background-position: center;
background-image:url(image.jpg);
background-size: cover;
}
| 归档时间： |
|
| 查看次数： |
24797 次 |
| 最近记录： |