Question

所以我希望显示img

尽可能大（当它是风景时填充宽度/纵向时是高度）
没有作物
没有歪斜或伸展（原始宽高比）
垂直和水平居中

此外，图像的原始尺寸未知。

我已经尝试了很多不同的选项，包括一个flexbox（获得垂直中心），但似乎没有任何东西勾选所有方框。

理想情况下，我当然希望这是一个全CSS解决方案，但我也在研究一些JS。

由于

Answer 1

jsFiddle Demo

要使其居中，您可以使用此处显示的技术：Absolute centering。

为了使其尽可能大，请max-width max-height和100%。{/ p>

.className {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    max-width: 100%;
    max-height: 100%;
    margin: auto;
    overflow: auto;
}

Answer 2

您可以使用带有背景图片的div和此CSS3属性：

background-size: contain

您可以查看以下示例：

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Scaling_background_images#contain

引用Mozilla：

包含值指定无论包含框的大小如何，都应缩放背景图像，使每个边尽可能大，同时不超过容器对应边的长度。

但是，请注意，如果div大于原始图片，您的图片会被放大。

Answer 3

经过反复试验，我发现这解决了我的问题。用于通过浏览器在电视上显示照片。

它保持照片的长宽比
垂直和水平缩放
垂直居中和水平居中
唯一需要注意的是非常宽的图像。它们确实可以填充，但不会改变很多，标准相机的照片不会改变。

试试看：）

*到目前为止仅在chrome中测试

HTML：

<div class="frame">
  <img src="image.jpg"/>
</div>

CSS：

.frame {
  border: 1px solid red;

  min-height: 98%;
  max-height: 98%;
  min-width: 99%;
  max-width: 99%;

  text-align: center;
  margin: auto;
  position: absolute;
}
img {
  border: 1px solid blue;

  min-height: 98%;
  max-width: 99%;
  max-height: 98%;

  width: auto;
  height: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

Answer 4

我已经指出了似乎没人在这里看到的答案。您可以使用纯CSS满足您提出的所有请求，这非常简单。只需使用Media Queries。媒体查询可以检查用户屏幕或视口的方向。然后，您可以根据方向对图像进行样式设置。

只需在图像上设置默认CSS即可，

<? 
$query = $db->query("SELECT * FROM posts ORDER BY id DESC LIMIT $limit");

if($query->num_rows > 0){ ?>
    <div class="posts_list">
    <?php
        while($row = $query->fetch_assoc()){ 
            $postID = $row['id'];
    ?>
        <div class="list_item">
            <h2><?php echo $row["title"] ?></h2>
            <!-- Pass Id into the function -->
            <button type="button" onclick="loadDoc(<?php echo $row['id'] ?>)" >View</button> 
        </div>
        <div class="item_viewer"><p id="demo"></p></div>
    <?php } ?>
    </div>
    <script type="text/javascript"> // Move JavaScript function out of loop, so that it only exists once in the document
        function loadDoc(rowId) { // Pass rowId as argument
            var xhttp = new XMLHttpRequest();
            xhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                document.getElementById("demo").innerHTML = this.responseText;
            }
            };
            xhttp.open("GET", "file/file.php?id=" + rowId, true);
            xhttp.send();
        }
    </script>
    <?php echo $pagination->createLinks(); ?>
<?php } ?>

然后使用一些媒体查询来检查您的方向！

img {
   width:auto;
   height:auto;
   max-width:100%;
   max-height:100%;
}

您将始终获得可缩放以适合屏幕的图像，永远不会丢失纵横比，永远不会缩放到大于屏幕，永远不会剪辑或溢出。

要了解有关这些媒体查询的更多信息，请阅读MDN's specs。

居中

要将图像水平和垂直居中，只需使用flex box model。使用设置为100％宽度和高度的父级@media (orientation: landscape) { img { height:100%; } } @media (orientation: portrait) { img { width:100%; } }，如下所示：

div

在父div的div.parent { display:flex; position:fixed; left:0px; top:0px; width:100%; height:100%; justify-content:center; align-items:center; }设置为display的情况下，该元素现在可以使用弹性框模型了。 flex属性设置弹性项目的水平对齐方式。 justify-content属性设置弹性项目的垂直对齐方式。

结论

我也想要这些确切的要求，并在网上搜寻了纯CSS解决方案。由于此处的答案都不能通过变通方法或牺牲一两个需求来满足您的所有要求，因此该解决方案对于您的目标确实是最直接的；因为它可以通过纯CSS满足您的所有要求。

编辑：仅当您的图像较大时，可接受的答案才会出现。尝试使用小图像，您将看到它们永远不会大于其原始大小。

Answer 5

yourimg {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
}

并确保没有位置的父标签：相对于其中

响应式图像全屏和居中 - 保持纵横比，不超过窗口

5 个答案:

居中

结论