如何在保持CSS宽高比的同时调整图像大小？

提问于 2024-04-29T13:55:03+08:00

浏览次

32

我有一个大图像 . 我想在它自己的网页上显示它，并且在没有任何CSS的情况下这样做它会填满整个页面并且太大而不能立即显示（滚动条出现） . 我想缩小它以使其适合用户屏幕的高度（而不是宽度） . 我已经找到了解决方案，但是这些可以拉伸图像以适应整个屏幕 - 我不希望这样，因为它会破坏纵横比 .

基本上，我想在保持纵横比的同时调整图像大小 . 我该怎么做呢？

4 回答

39
我想你需要在想要显示的图像中粘贴一个类
```
< image  class="image" >
```
这是 class
```
.image 


 text align: center
 max width:pixels you want
 max height pixels you want
```
但要确保两者的数量相同，不会在高度和宽度上离开屏幕 .

或者你可以玩宽度和高度
回复于 2024-04-29T13:55:03+08:00
21
您可以使用带背景图像的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属性 .

尽管背景大小属性是> = 9 .
回复于 2024-04-29T13:55:03+08:00
1
只需将 width 设置为 auto ：
```
img {
   width: auto;
   max-height: 100%;
}
```
这是小提琴：http://jsfiddle.net/6Y5Zp/
回复于 2024-04-29T13:55:03+08:00

7

这是样本之一

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>

回复于 2024-04-29T13:55:03+08:00

相关问题