Question

我有一个网页，我想在其上显示具有以下限制的图像：

视口尺寸未知
图像尺寸未知（用户定义）
图像需要在视口尺寸处调整大小，保持其比例
图片需要居中

是否只有CSS解决方案来实现这一目标？否则可以使用js轻松完成吗？

Answer 1

.image-container {
  width: 100%;
  text-align: center;
}

.image-conteiner img {
  width: 100%;
  height: auto;
}

<div class="image-container"><img src="http://lorempixel.com/200/400/sports"></div>

Answer 2

为图片的直接父级提供text-align: center规则。并设置图片max-width: 100%;和max-height: 100%。现在，图像就是所谓的响应。

如果您调整窗口大小，图像将保持其尺寸并随窗口宽度缩放。

使用.container和max-width

，margin: 0 auto位于页面的中心位置

html, body {
  height: 100%;
  width: 100%;
  margin: 0;
}

.container {
  max-width: 400px;
  margin: 0 auto;
  height: 100%;
  text-align: center;
}

.container img {
  max-width: 100%;
  max-height: 100%;
}

<div class="container">
  <img src="http://imaging.nikon.com/lineup/lens/zoom/normalzoom/af-s_dx_18-140mmf_35-56g_ed_vr/img/sample/sample1_l.jpg" title="sample image" alt="Image" />
</div>

Answer 3

我终于想出了一个解决方案，问题是它正在使用I.E.无法使用的flexbox显示屏。用户。但对我来说这是一个可以接受的解决方案，因为我主要需要一个使用Chromium的解决方案。即使普遍使用的CSS会更好。

.image-container {
  width: 100vw;
  height: 100vh;
  display: flex;
}

.image-container img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center; /* normally it's the default value */
}

<div class="image-container"><img src="http://lorempixel.com/200/400/sports"></div>

Answer 4

您应该考虑使用object-fit CSS规则。通过将object-fit: cover应用于图像，您可以获得与在背景图像中使用background-size: cover;时相同的效果：图像将始终适合并适应您自己设置的尺寸。这是CSS：

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

您可以通过更改图片width和Codepen在此Codepen link中进行游戏 height。

我希望它能够结束！

编辑：

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

对于HTML：

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

CSS：

img {
   object-fit: cover;
}

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();
    });
});

您可以在这里查看新的https://github.com/florent37/SingleDateAndTimePicker。

Answer 5

我想解决方案需要结合JS和CSS object-fit:cover规则。我刚刚创建了一个带有两个参数的JS函数，一个用于我们希望插入图像的元素，另一个用于图像本身。这样它似乎比我以前的答案更有用和模块化。

<强> HTML

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

<强> CSS

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

#img_to_fit {
  object-fit: cover;
}

<强> JS

$(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') );
    });
});

这是CodePen。您可以尝试修改width类中的height和.image_container，然后刷新或调整窗口大小以查看结果。

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

5 个答案: