MAJOR EDIT: Okay I just realize there are a hundred different cases where you'd want to do what I want but using different rules, so I will have to describe my specific case. Basically I am using this image popup (code here)
好吧，我刚意识到有一百种不同的情况，你想做我想做的事，但是使用不同的规则，所以我必须描述我的具体情况。基本上我使用的是这个图像弹出式(这里的代码)
If you squeeze down the size of the window when a popup is on, you will notice the popup does not shrink to fit the window, which gives a poor user experience notably on landscape mode on your smartphone
如果你在弹出窗口打开时压缩窗口的大小，你会注意到弹出窗口并没有缩小到适合窗口的大小，这给你的智能手机的横向模式带来了糟糕的用户体验
I want my popup to shrink according to the two dimensions of the screen, without changing the aspect ratio of the image. (keeping it squared)
我希望弹出框根据屏幕的两个维度进行收缩，而不改变图像的长宽比。(保持它的平方)
So far I have made these changes:
到目前为止，我已经做了这些改变:
.focus {
z-index: 10;
max-width: 500px;
max-height: 500px;
display: none;
}
.focus.enabled .container {
max-width: 500px;
max-height: 500px;
}
If you try there using firebug, it makes the image responsive when shrinking width, but not when shrinking height of the window... how do I make both dimensions responsive, while keeping a good aspect ratio for the image?
如果你尝试使用firebug，它会使图像在宽度缩小时响应，而不是窗口高度缩小时响应……如何使两个维度都具有响应性，同时保持图像的高宽比?
----------- Previous question (for historic purpose only): ----------------
- - - - - - - - - - - -之前的问题(仅为历史目的):- - - - - - - - - - - - - - - - -
I want to keep an element (in that case, a picture) with a max-size of 500x500 strictly within my browser window, all that while keeping its aspect ratio. Here's some html:
我希望在我的浏览器窗口中严格保留一个大小为500x500的元素(在这种情况下，是图片)，同时保持它的纵横比。这里有一些html:
<html>
<head>
</head>
<body>
<img src="myimage.png" class="image" />
</body>
</html>
And some css:
和一些css:
.image {
max-height: 500px;
max-width: 500px;
height: 100%;
width: 100%;
}
Now with this css, the image stays within the window, but gets distorted when one of the dimensions of the window gets smaller than 500px. To fix the ratio, I can get rid of one of the two 100% rules:
现在有了这个css，图像就留在窗口中，但是当窗口的一个维度小于500px时，图像就会被扭曲。为了固定比率，我可以去掉两个100%规则中的一个:
.image {
max-height: 500px;
max-width: 500px;
height: 100%;
/*width: 100%;*/
}
But then, the ratio is kept indeed, but the image gets cropped when window width gets smaller than 500px! What is a pure and simple css solution to this seemingly basic issue?
但是，这个比率确实保持不变，但是当窗口宽度小于500px时，图像就会被裁剪。对于这个看似基本的问题，一个简单的css解决方案是什么?
1 个解决方案
#1
4
This is a good use case for vmin units :
这是一个很好的vmin单元用例:
1/100th of the minimum value between the height and the width of the viewport. (source : MDN)
视点的高度和宽度之间的最小值的百分之一。(来源:MDN)
演示
Relevant CSS :
相关的CSS:
img {
width: 70vmin;
height: 70vmin;
max-width: 500px;
max-height: 500px;
}
The drawback for using these units is browsers support, they are not supported by IE8- (see canIuse for more info)
使用这些单元的缺点是支持浏览器，IE8不支持它们(更多信息请参见canIuse)
For IE9 support you need to specify vm instead of vmin example :
对于IE9支持，您需要指定vm而不是vmin示例:
width:70vm;
width: 70vmin;
height:70vm;
height: 70vmin;
If you can't use these units, there is no way I am aware of to maintain the aspect ratio of a div with CSS according to height. You can maintaint the aspect ratio of a div according to width using the padding technique described in many post on SO like this one.
如果您不能使用这些单元，我不知道如何根据高度来维护带有CSS的div的纵横比。您可以根据宽度来维护div的纵横比，使用很多文章中描述的填充技术，比如本文。
For the image, you can use the CSS rules I described in my previous answer but you won't be able to limit the size of the image to an arbitrary amount of pixels.
对于图像，您可以使用我在前面的回答中描述的CSS规则，但是不能将图像的大小限制为任意数量的像素。
------PREVIOUS ANSWER------------------
- - - - - -之前的回答- - - - - - - - - - - - - - - - - -
If the natural size of the image is 500x500px, you don't need to specify the 500px max-width/height.
如果图像的自然大小是500x500px，您不需要指定500px的最大宽度/高度。
You can use that property for the 100% max-width/height and give width/height the auto attribute to keep the aspect ratio of image and never exceed 100% or 500px width/height :
你可以对100% max-width/height使用该属性，并为width/height赋予auto属性，以保持图像的纵横比，不要超过100%或500px width/height:
演示
HTML :
HTML:
<img src="http://lorempixel.com/output/nature-q-c-500-500-5.jpg" alt="" />
CSS :
CSS:
img {
max-width:100%;
max-height:100%;
width:auto;
height:auto;
}
#1
4
This is a good use case for vmin units :
这是一个很好的vmin单元用例:
1/100th of the minimum value between the height and the width of the viewport. (source : MDN)
视点的高度和宽度之间的最小值的百分之一。(来源:MDN)
演示
Relevant CSS :
相关的CSS:
img {
width: 70vmin;
height: 70vmin;
max-width: 500px;
max-height: 500px;
}
The drawback for using these units is browsers support, they are not supported by IE8- (see canIuse for more info)
使用这些单元的缺点是支持浏览器，IE8不支持它们(更多信息请参见canIuse)
For IE9 support you need to specify vm instead of vmin example :
对于IE9支持，您需要指定vm而不是vmin示例:
width:70vm;
width: 70vmin;
height:70vm;
height: 70vmin;
If you can't use these units, there is no way I am aware of to maintain the aspect ratio of a div with CSS according to height. You can maintaint the aspect ratio of a div according to width using the padding technique described in many post on SO like this one.
如果您不能使用这些单元，我不知道如何根据高度来维护带有CSS的div的纵横比。您可以根据宽度来维护div的纵横比，使用很多文章中描述的填充技术，比如本文。
For the image, you can use the CSS rules I described in my previous answer but you won't be able to limit the size of the image to an arbitrary amount of pixels.
对于图像，您可以使用我在前面的回答中描述的CSS规则，但是不能将图像的大小限制为任意数量的像素。
------PREVIOUS ANSWER------------------
- - - - - -之前的回答- - - - - - - - - - - - - - - - - -
If the natural size of the image is 500x500px, you don't need to specify the 500px max-width/height.
如果图像的自然大小是500x500px，您不需要指定500px的最大宽度/高度。
You can use that property for the 100% max-width/height and give width/height the auto attribute to keep the aspect ratio of image and never exceed 100% or 500px width/height :
你可以对100% max-width/height使用该属性，并为width/height赋予auto属性，以保持图像的纵横比，不要超过100%或500px width/height:
演示
HTML :
HTML:
<img src="http://lorempixel.com/output/nature-q-c-500-500-5.jpg" alt="" />
CSS :
CSS:
img {
max-width:100%;
max-height:100%;
width:auto;
height:auto;
}