如何在保持CSS中的宽高比的同时调整图像大小？ [英] How do I resize an image while keeping the aspect ratio in CSS?

问题描述

我有一个大图片。我想要在自己的网页上显示它，当没有任何CSS的时候，它填充整个页面，太大，不能一次显示（滚动条出现）。我想缩放它，以适应用户的屏幕的高度（而不是宽度）。我发现解决方案，但这些拉伸图像适合整个屏幕 - 我不想这，因为它破坏了长宽比。

基本上，我想要调整图像大小，同时保持高宽比。 c>

只要将 width 设为 auto ：

  img {
 width：auto; 
 max-height：100％; 
} 
  

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

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.

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

解决方案

Just set the width to auto:

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

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

这篇关于如何在保持CSS中的宽高比的同时调整图像大小？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！