使用CSS在不知道尺寸的情况下调整屏幕上图像的大小并使其居中

我有一个网页，希望在该网页上显示具有以下约束的图像：

• 视口维度未知
• 图像维度未知（用户定义）
• 图像需要在视口维度上调整大小，并保持其比率
• 图像需要居中

是否有一个CSS唯一的解决方案来实现这一点？ 否则，使用js可以轻松完成吗？

.image容器{
宽度：100%；
文本对齐：居中；
}
.图像内容器img{
宽度：100%；
高度：自动；
}

.image容器{
宽度：100%；
文本对齐：居中；
}
.图像内容器img{
宽度：100%；
高度：自动；
}

---

为图像的直接父对象指定一条

文本对齐：居中规则。
并设置图像
最大宽度：100%和
最大高度：100%
。现在的图像就是所谓的响应图像

如果调整窗口大小，图像将保持其尺寸标注和比例与窗口宽度一致

.container
使用
max width
和
margin:0 auto


html，正文{
身高：100%；
宽度：100%；
保证金：0；
}
.集装箱{
最大宽度：400px；
保证金：0自动；
身高：100%；
文本对齐：居中；
}
.集装箱img{
最大宽度：100%；
最大高度：100%；
}
为图像的直接父对象指定一条
文本对齐：居中规则。
并设置图像
最大宽度：100%和
最大高度：100%
。现在的图像就是所谓的响应图像

如果调整窗口大小，图像将保持其尺寸标注和比例与窗口宽度一致

.container
使用
max width
和
margin:0 auto


html，正文{
身高：100%；
宽度：100%；
保证金：0；
}
.集装箱{
最大宽度：400px；
保证金：0自动；
身高：100%；
文本对齐：居中；
}
.集装箱img{
最大宽度：100%；
最大高度：100%；
}
我终于想出了一个解决方案，问题是它使用的是flexbox显示器，即用户无法使用。
但对我来说，这是一个可以接受的解决方案，因为我主要需要一个与铬一起工作的解决方案。即使一个通用的CSS会更好


.image容器{
宽度：100vw；
高度：100vh；
显示器：flex；
}
.图像容器img{
宽度：100%；
身高：100%；
对象匹配：包含；
对象位置：居中；/*通常为默认值*/
}
我终于想出了一个解决方案，问题是它使用的是flexbox显示器，即用户无法使用。
但对我来说，这是一个可以接受的解决方案，因为我主要需要一个与铬一起工作的解决方案。即使一个通用的CSS会更好


.image容器{
宽度：100vw；
高度：100vh；
显示器：flex；
}
.图像容器img{
宽度：100%；
身高：100%；
对象匹配：包含；
对象位置：居中；/*通常为默认值*/
}
<代码> 
您应该考虑使用CSS规则。通过对图像应用
object fit:cover
，可以获得与使用
background size:cover时相同的效果背景图像：图像将始终适合并调整您自己设置的尺寸。以下是CSS：

img {
  width: 200px;
  height: 200px;
  object-fit: cover;
}

通过更改图像
宽度
和
高度

我希望一切顺利

编辑：

我添加了一些JS以确保它适应视口（CSS中不需要维度）

对于HTML：

<img id="home" src="https://www.w3schools.com/css/img_fjords.jpg" alt="">  

JS：

$(document).ready(function(){

    function wholePage() {
        var h = window.innerHeight;
        var w = window.innerWidth;
        $('#home').css('height', h);
        $('#home').css('width', w);
    }

    wholePage();

    $(window).resize(function() {
        wholePage();
    });
});

这里你可以检查新的.
你应该考虑使用CSS规则。通过对图像应用
object fit:cover
，可以获得与使用
background size:cover时相同的效果背景图像：图像将始终适合并调整您自己设置的尺寸。以下是CSS：

img {
  width: 200px;
  height: 200px;
  object-fit: cover;
}

通过更改图像
宽度
和
高度

我希望一切顺利

编辑：

我添加了一些JS以确保它适应视口（CSS中不需要维度）

对于HTML：

<img id="home" src="https://www.w3schools.com/css/img_fjords.jpg" alt="">  

JS：

$(document).ready(function(){

    function wholePage() {
        var h = window.innerHeight;
        var w = window.innerWidth;
        $('#home').css('height', h);
        $('#home').css('width', w);
    }

    wholePage();

    $(window).resize(function() {
        wholePage();
    });
});

在这里，您可以查看新的。
我想解决方案需要将JS和CSS
对象匹配：cover
规则结合起来。我刚刚创建了一个JS函数，它有两个参数，一个用于插入图像的元素，另一个用于图像本身。这样看来，它比我之前的答案更有用、更模块化

HTML

<div class="image_container">
    <img id="img_to_fit" src="https://www.w3schools.com/css/img_fjords.jpg" alt="">      
</div>

JS

.image_container {
  width: /* unknown */;
  height: /* unknown */;
}

#img_to_fit {
  object-fit: cover;
}

$(document).ready(function(){

    function niceFilling( holderElement, picture ) {
        var h = holderElement.css('height');
        var w = holderElement.css('width');
        picture.css('height', h);
        picture.css('width', w);
    }

    niceFilling( $('.image_container') , $('#img_to_fit') );

    $(window).resize(function() {
        niceFilling( $('.image_container') , $('#img_to_fit') );
    });
});

这是我的建议。您可以尝试修改
.image\u容器
类中的
宽度
和
高度
，然后刷新或调整窗口大小以查看结果。
我想解决方案需要将JS和CSS
对象适合：封面
规则相结合。我刚刚创建了一个JS函数，它有两个参数，一个用于插入图像的元素，另一个用于图像本身。这样看来，它比我之前的答案更有用、更模块化

HTML

<div class="image_container">
    <img id="img_to_fit" src="https://www.w3schools.com/css/img_fjords.jpg" alt="">      
</div>

JS

.image_container {
  width: /* unknown */;
  height: /* unknown */;
}

#img_to_fit {
  object-fit: cover;
}

$(document).ready(function(){

    function niceFilling( holderElement, picture ) {
        var h = holderElement.css('height');
        var w = holderElement.css('width');
        picture.css('height', h);
        picture.css('width', w);
    }

    niceFilling( $('.image_container') , $('#img_to_fit') );

    $(window).resize(function() {
        niceFilling( $('.image_container') , $('#img_to_fit') );
    });
});

这是我的建议。您可以尝试修改
.image\u容器
类中的
宽度
和
高度
，然后刷新或调整窗口大小以查看结果。
图像是否应该绝对定位？不，我只希望它居中。图像是否应该绝对定位？不，我只想让它居中。如果不进行测试，我认为它在很多情况下都不起作用，例如在屏幕上以“横向”格式显示“纵向”格式的图像。哇，看看这个。现在，它在屏幕上以“横向”格式显示“纵向”格式的图像（当您全屏显示时）。谢谢您的帮助，但不客气