38

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

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

4

4 回答 4

45

只需设置width为auto：

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

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

于 2012-09-07T15:09:20.350 回答
23

这是示例之一

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>

于 2015-02-22T11:21:22.147 回答
7

您可以使用带有背景图像的 div 并设置背景大小：包含：

div.image{
    background-image: url("your/url/here");
    background-size:contain;
    background-repeat:no-repeat;
    background-position:center;
}

现在您可以将您的 div 大小设置为您想要的任何大小，并且图像不仅会保持其纵横比，而且还会垂直和水平集中。只是不要忘记在 css 上设置大小，因为 div 在标签本身上没有宽度/高度属性。

background-size 属性只是 ie>=9 而已。

于 2013-05-30T13:59:37.660 回答
0

我认为您需要在要显示的图像中粘贴一个类

< image  class="image" >

这就是课堂

.image 


 text align: center
 max width:pixels you want
 max height pixels you want

但要确保两者的数量相同，这样就不会在高度和宽度上超出屏幕。

或者你可以玩宽度和高度

于 2013-06-05T02:56:20.863 回答