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

时间:2012-09-07 15:07:49

标签: html css image

我有一张大图。我希望在它自己的网页上显示它,并且在没有任何CSS的情况下执行此操作时,它会填满整个页面并且太大而无法立即显示(滚动条出现)。我想缩小它以使其适合用户屏幕的高度(而不是宽度)。我已经找到了解决方案,但这些解决方案可以将图像拉伸到整个屏幕 - 我不希望这样,因为它会破坏纵横比。

基本上,我想在保持纵横比的同时调整图像大小。我该怎么做?

4 个答案:

答案 0 :(得分:44)

只需将width设置为auto

即可
img {
   width: auto;
   max-height: 100%;
}

这是小提琴:http://jsfiddle.net/6Y5Zp/

答案 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;
&#13;
&#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

但要确保两者的数量相同 那种方式不会在高度和宽度上离开屏幕。

或者你可以玩宽度和高度