Html CSS，用于使图像响应于包含元素的宽度和可见高度_Html_Css

Html CSS，用于使图像响应于包含元素的宽度和可见高度

html css

Html CSS，用于使图像响应于包含元素的宽度和可见高度,html,css,Html,Css,我需要图像获取容器的整个宽度，除非生成的高度大于可用容器的视口高度基本上，我希望图像能够响应，但也希望它仍然适合屏幕。如果它不适合屏幕，应该缩小比例，水平居中，最好在其侧面添加黑色瓷砖目前，我的CSS类如下所示： .img-responsive{ display: block; max-width: 100%; min-width: 100%; height: auto; } 我曾尝试在图像上或专用容器上使用最大高度，但纯CSS似乎没有任何效果澄清：我事先不知道图像的尺

我需要图像获取容器的整个宽度，除非生成的高度大于可用容器的视口高度

基本上，我希望图像能够响应，但也希望它仍然适合屏幕。如果它不适合屏幕，应该缩小比例，水平居中，最好在其侧面添加黑色瓷砖

目前，我的CSS类如下所示：

.img-responsive{
  display: block;
  max-width: 100%;
  min-width: 100%;
  height: auto;
}

我曾尝试在图像上或专用容器上使用最大高度，但纯CSS似乎没有任何效果

澄清：

我事先不知道图像的尺寸，所以不能只把它们放在预设大小的容器中

基本上，我的目标是使图像始终在屏幕上完全可见（如果滚动到图像），并占据尽可能大的表面

这里有一个更详细的示例：

假设我有一个包含大量内容的可滚动容器。容器占据整个视口宽度（假设为500px），容器的可用可见高度是整个视口高度减去导航栏高度（假设为1000px）

我不能预先知道容器的可见尺寸是多少，因为它总是会变化的

容器里面有任何东西，文本，图像等等

现在，对于给定的图像，以下是可能的场景：

如果图像为500x800，则应按原样显示，因为它占用整个可用宽度，且高度不大于容器的可见高度
如果图像为500x2000，则应缩小到250x1000 水平居中。这将占用整个可见容器的高度，并保持图像的纵横比
如果图像为250x300，则应放大至500x600，占据整个可用宽度
如果图像为200x500，则应将其放大至400x1000，以占据整个可用高度
如果图像为1000x1000，则应缩小到500x500，占据整个可用宽度

您可以使用父容器的

高度：100%

（在我的例子中是它的

img支架

）。并将

text align:center

应用于父对象。比如：

.img-holder {
  width: 100px;
  height: 100px;
  border: 1px solid #555;
  text-align: center;
}

.img-holder img {
  height: 100%;
}

让al看一下下面的片段：

.img支架{
宽度：100px；
高度：100px；
边框：1px实心#555；
文本对齐：居中；
}
img{
身高：100%；
}

我建议不要为此使用IMG标签。而是使用div标记，然后使用背景图像属性。以下是代码，将容器大小设置为您喜欢的大小：

<div id="container"></div>

<style>
width: 500px;
height: 500px;
background-image: url('your url');
background-size: contain;

</style>


宽度：500px；
高度：500px；
背景图片：url（“你的url”）；
背景尺寸：包含；

background size:contain

是最好的选择。它将图像缩放到div中图像可以达到的最大值，而不会使其大于其原始大小。希望这有帮助

编辑：

忘了添加，如果你想让它在容器的中心，这样当图像不适合容器的全部尺寸时，它周围就有空白，你可以使用css代码

背景位置：center-center

主要需要给

img

元素两个属性

{max width:100%}

和

{height:auto}

如果您全屏打开下面的代码段并调整窗口大小（注意：图像大小是随机选择的）

你会看到他们踢得多好。它们坚持最大宽度，不会在任何方向过度拉伸

我在其中添加了一些代码，以便更容易显示

例如，使给定图像

{display:block}

和

{padding bottom}

正文{
背景：131418；
文本对齐：居中；
颜色：白色；
字体大小：25px；
}
身体，
.图像容器，
.图像容器img，
斯莫迪夫先生{
最大宽度：100%；
}
.图像容器img{
高度：自动；
显示：块；
垫底：1米；
}
斯莫迪夫先生{
/*仅适用于脱毛*/
宽度：600px；
背景：深蓝色；
}
斯莫迪夫先生，
.图像容器img{
保证金：0自动；
}

图像将始终保持其纵横比，并且始终与其父容器的宽度保持一致。

这就是图像容器在拥有整个屏幕空间时的外观
这就是包含div的图像放在小于屏幕宽度的容器中时的外观

邪恶448答案非常接近，只是它只适用于背景图像。我得到的是：

<html>
<head>
<style>
    body {
        margin: 0px;
    }

    .holder {
        background-image: url('image1.JPG');
        background-size: contain;
        background-position: center center;
        width: 100vw;
        height: 100vh;
        background-repeat: no-repeat;
    }
</style>
</head>
<body>
    <div class="holder">
        <div class="inner">
        </div>
    </div>
</body>
</html>


身体{
边际：0px；
}
.持有人{
背景图片：url（'image1.JPG'）；
背景尺寸：包含；
背景位置：中心；
宽度：100vw；
高度：100vh；
背景重复：无重复；
}

我不知道如何将内部div的大小与图像的大小相等。

最好也是最简单的方法是使用vh和vw属性。当设置为100时，vh将占据整个视口高度，而vw将占据宽度。此外，可以添加“最大高度”属性，以阻止图像拉伸超出其原始尺寸

.img responsive{display:block；margin:0 auto；width:auto；min height:100vh；}

将

最小宽度

和

最大宽度

设置为

100%

与将宽度设置为100%基本相同。@Scott，你是对的，愚蠢的错误。只是将其更改为宽度100%。这假设我知道一些关于图像尺寸的信息，但我不知道。我无法限制建议容器的大小，因为我事先不知道图像的尺寸。建议的容器需要使用