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

I have a large image. I want to display it on its on own a web page, and when doing this without any CSS it fills the whole page and is too big to display at once (scroll bars appear). I want to scale it down so it fits the height of the user's screen (not the width). I've found solutions but these stretch the image to fit the whole of the screen -- I don't want this as it ruins the aspect ratio.

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

Basically, I want to resize an image while keeping the aspect ratio. How do I do this?

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

4 个解决方案

#1

Just set the width to auto:

只需将宽度设置为auto：

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

Here's the fiddle: http://jsfiddle.net/6Y5Zp/

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

#2

here is the sample one

这是样本之一

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>

#3

You can use a div with background-image and set background-size: contain:

您可以使用带背景图像的div并设置background-size：contains：

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

Now you can just set your div size to whatever you want and not only will the image keep its aspect ratio it will also be centralized both vertically and horizontally. Just don't forget to set the sizes on the css since divs don't have the width/height attribute on the tag itself.

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

The background-size property is ie>=9 only though.

尽管背景大小属性是> = 9。

#4

I think you need to paste a class inside the image you want to show like this

我想你需要在想要显示的图像中粘贴一个类

< image  class="image" >

and this is the class

这是班级

.image 


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

but make sure that both are the same quantity that way wont get out of the screen in height and width.

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

or you can play with the width and the height

或者你可以玩宽度和高度

#1