最大高度 - 按比例拉伸 - 不收缩 - 以适应容器，是可能吗？ [英] max-height - stretch proportionally - NOT SHRINK - to fit container, is it possible?

问题描述

所以我有一些父容器/ div位于固定的页面上。它的高度和宽度设置为100％。在容器内是一个图像。我目前已经写了一些JavaScript，使图像伸展到100％的宽度或100％的容器高度，这取决于图像的尺寸。然后将图像垂直或水平居中。

目前这个工作很奇妙，但是

/ strong> ...这是除了点。真正的问题是这样：有没有办法用只是CSS ？换句话说，一个元素是否有可能按比例扩展到它的容器，但不能剪辑/截断和使用JUST CSS？此外，NOT background-size：contains 。 Hacks也受欢迎。非常感谢。

我为任何想要搞砸的人设置一个小提琴...

为了防止有人在interwebs上看起来...
一个可行的替代使用< img> 可以是CSS background-size 属性。浏览器兼容性和Mozilla开发人员网络的更多信息此处

解决方案

有没有办法这样做与JUST CSS？换句话说，一个元素是否可以按比例扩展到它的容器，但不能被剪辑/截断，并且这样做与JUST CSS？

如果您将图片的 height 设置为 100％ c $ c> width ，它将按比例伸展到它的容器，而不被剪切或剪切。将宽度 设置为 100％而不设置 height 。

编辑

不能做你想做的只使用CSS，因为你需要知道图像的高宽比是高于还是低于其容器，CSS不能这样做。请查看此处，了解有关Stephan Muller手头问题的更详细说明

So I have some parent container/div positioned 'fixed' on the page. It's height and width are set to 100%. Within the container is an image. I currently have written some JavaScript so that the image stretches either to 100% width or 100% height of the container, depending on the image's dimensions. The image is then vertically or horizontally centered. As well, this is done every time the window is re-sized so that the image is always centered and fits.

Currently this is working wonderfully, but ... this is besides the point. The real question is this: Is there a way of doing this with just CSS? In other words, is it possible for an element to stretch proportionally to it's container but not be clipped/cut-off and doing so with JUST CSS? Also, NOT background-size: contain. Hacks are also welcome. Thanks.

I set up a fiddle for anyone that wants to mess around... HERE.

EDIT

Just in case someone out there on the interwebs is looking...
A viable alternative to using an <img> can be the CSS background-size property. Browser compatibility and more info from the Mozilla Developer Network HERE

解决方案

Is there a way of doing this with JUST CSS? In other words, is it possible for an element to stretch proportionally to it's container but not be clipped/cut-off and doing so with JUST CSS?

If you set the height of the image to 100% only without setting the width, it will stretch proportionally to its container without being clipped or cut off. Same for setting the width only to 100% and not setting the height.

Edit

You can't do what you want to do using only CSS as you would need to know if the aspect ratio of the image is higher or lower than its container, CSS can't do that. Have a look here for a more detailed explanation of the issue at hand by Stephan Muller

这篇关于最大高度 - 按比例拉伸 - 不收缩 - 以适应容器，是可能吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！