使用CSS将图像大小设置为容器高度的100％ [英] Using CSS to make image size 100% to height of container
本文介绍了使用CSS将图像大小设置为容器高度的100％的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我已经看过解决方案后解决方案，尝试各种各样的事情，但从来没有得到这个工作正确...
I have looked around reading solution after solution and trying all kinds of things but never getting this to work right...
我想要的图像结束了根据浏览器窗口的当前高度动态调整大小。目前使用图片下方的代码是原始高度，最终比浏览器窗口大LARGER，导致出现垂直滚动条。
I want the image to end up being dynamically resized based on the current height of the browser window. Currently using the code below the image is the original height and ends up being LARGER than the browser window causing a vertical scrollbar to appear.
请注意：我想要这个完成使用相同数量的表和单元格。请不要给我一个单一的表解决方案。谢谢！
<html>
<head>
<style>
body
{
text-align: center;
margin: 0px;
margin-left: auto;
margin-right: auto;
}
table.one
{
border-collapse: collapse;
}
table.two
{
border-collapse: collapse;
}
img
{
max-height: 100%;
}
</style>
</head>
<body>
<table class="one" cellpadding=0>
<tr>
<td>
<table class="two" cellpadding=0>
<tr>
<td>
<img src="myimage.jpg">
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
推荐答案
您可以使用视口单位根据大小的浏览器窗口。
You can use viewport units to resize based on the size of the browser window.
img {
max-height: 100vh;
}
这篇关于使用CSS将图像大小设置为容器高度的100％的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
