保持纵横比与最小/最大高度/宽度？ [英] Maintaining aspect ratio with min/max height/width?

问题描述

我在我的网站上有一个图片库，用户可以上传图片。

我想要图片坐在一个维持其高度的div，图片应该高度不超过500像素。宽度应自动保持宽高比。

HTML：

 < div id =gallery> 
< img src =uploads / my-dynamic-img.jpg> 
< / div> 
  

我试过这个CSS：

  #gallery {
 height：500px; 
 
 img {
 max-height：500px; 
 max-width：100％; 
} 
} 
  

上面的效果很好，和图像从不超过500px的高度。我遇到了问题，虽然与较小的图像，如果用户上传一个非常小的图像，我想它的爆炸至少200px。我知道这可以通过在图像上设置 min-height 来实现，这个问题是，如果图像的高度小于200px，但是宽度为2000px，图片的高度会被调高到200像素，但是长宽比会被调整，因为图片的宽度比图片的parent div要宽。

如何使用min

您要查找的属性是 object-fit

code>。这是Opera的创新之一，您可以在他们的 2011年dev文章中详细了解它，适合（是的，已经有这么长的时间）。几年前，我不能推荐给你，但caniuse显示其他人都开始赶上：

• Opera 10.6-12.1（-o- prefix）


• Chrome 31 +


• Opera 19 +


• Safari 7.1 +


• iOS 8 +


• Android 4.4+

http://caniuse.com/#search=object-fit

  #gallery img {
 -o-object-fit：contain; 
 object-fit：contains; 
} 
  

使用的值



或者，您也可以改用：

  #gallery img {
 -o-object-fit：cover; 
 object-fit：cover; 
 overflow：hidden; 
} 
  

http://sassmeister.com/gist/9b130efdae95bfa4338e

I have a gallery on my site where users can upload images.

I would like the images to sit in a div that maintains its height, the images should be no larger than 500px in height. The width should be automatic to maintain aspect ratio.

HTML:

<div id="gallery">
    <img src="uploads/my-dynamic-img.jpg">
</div>

I've tried this CSS:

#gallery{
    height: 500px;

    img{
        max-height: 500px;
        max-width: 100%;
    }
}

The above works well, the gallery is always 500px high and images never exceed 500px in height. I run into problems though with smaller images, if a user uploads a really small image, I would like it 'blown up' to a minimum of 200px. I know this can be achieved by setting a min-height on the image, the problem with this is, if the image is less than 200px in height but say, 2000px wide, the image gets blown up to 200px in height, but then the aspect ratio is screwed, as the image is wider than the images parent div.

How can I have a min height but retain aspect ratio?

解决方案

The property you're looking for is object-fit. This is one of Opera's innovations, you can read more about it in their 2011 dev article on object-fit (yep, it's been around that long). A few years ago, I wouldn't have been able to recommend it to you, but caniuse shows that everyone else is starting to catch up:

• Opera 10.6-12.1 (-o- prefix)
• Chrome 31+
• Opera 19+
• Safari 7.1+
• iOS 8+
• Android 4.4+

http://caniuse.com/#search=object-fit

#gallery img {
    -o-object-fit: contain;
    object-fit: contain;
}

Using a value of contain will force the image to maintain its aspect ratio no matter what.

Alternately, you might want to use this instead:

#gallery img {
    -o-object-fit: cover;
    object-fit: cover;
    overflow: hidden;
}

http://sassmeister.com/gist/9b130efdae95bfa4338e

这篇关于保持纵横比与最小/最大高度/宽度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！