我有一张大图。我希望在它自己的网页上显示它,并且在没有任何CSS的情况下执行此操作时,它会填满整个页面并且太大而无法立即显示(滚动条出现)。我想缩小它以使其适合用户屏幕的高度(而不是宽度)。我已经找到了解决方案,但这些解决方案可以将图像拉伸到整个屏幕 - 我不希望这样,因为它会破坏纵横比。
基本上,我想在保持纵横比的同时调整图像大小。我该怎么做?
答案 0 :(得分:44)
答案 1 :(得分:22)
这是样本
div{
width: 200px;
height:200px;
border:solid
}
img{
width: 100%;
height: 100%;
object-fit: contain;
}

<div>
<img src="https://upload.wikimedia.org/wikipedia/meta/0/08/Wikipedia-logo-v2_1x.png">
</div>
&#13;
答案 2 :(得分:7)
您可以使用带背景图像的div并设置background-size:contains:
div.image{
background-image: url("your/url/here");
background-size:contain;
background-repeat:no-repeat;
background-position:center;
}
现在您可以将div大小设置为您想要的任何值,不仅图像保持其纵横比,它还将在垂直和水平方向上集中。只是不要忘记在css上设置大小,因为div在标签本身上没有width / height属性。
background-size属性即ie> = 9。
答案 3 :(得分:0)
我认为你需要在想要显示的图像中粘贴一个类
< image class="image" >
这是班级
.image
text align: center
max width:pixels you want
max height pixels you want
但要确保两者的数量相同 那种方式不会在高度和宽度上离开屏幕。
或者你可以玩宽度和高度