时间戳

首页 > 解决方案 > 如何根据视口高度缩小图像？

html - 如何根据视口高度缩小图像？

问题描述

目标是根据视口的高度查看完整的图像。不幸的是，每当缩小窗口的高度时，它就会溢出裁剪我们的图像。我正在使用网格显示，因此内容永远不会重叠或内联。

如何防止这种行为并使其在保持图像纵横比的同时始终占用 100% 的剩余空间？

图像不能有固定的高度。

这是小提琴：https ://jsfiddle.net/8jztc2sf

html, body {
  margin: 0px;
}

.slide {
  text-align: center;
  overflow: hidden;
  display: grid;
  height: 100vh;
  min-height: 300px;
}

.slide > div:first-child {
  padding: 1rem 0rem 2rem;
}

.slide > div:last-child {
  margin-top: auto;
}

.slide > div:last-child img {
  max-height: 350px;
  margin-right: auto;
  margin-left: auto;
  height: 100%;
}

.slide-2 {
  background: #fafafa;
  border-top: 1px solid #eee;
}
<div class="slide">    
    <div>
        <h2>Pellentesque habitant morbi</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis fermentum gravida tincidunt.<br/>Integer sed consequat erat, non facilisis est. Etiam vel quam id ligula tempor feugiat vel in urna.</p>

        <a href="#">Etiam vel</a>
    </div>

    <div>
        <img src="https://picsum.photos/400/300" />
    </div>
</div>

<div class="slide slide-2">    
    <div>
        <h2>Pellentesque habitant morbi</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis fermentum gravida tincidunt.<br/>Integer sed consequat erat, non facilisis est. Etiam vel quam id ligula tempor feugiat vel in urna.</p>

        <a href="#">Etiam vel</a>
    </div>

    <div>
        <img src="https://picsum.photos/400/300" />
    </div>
</div>

标签： htmlcss

解决方案

您可以尝试如下：

html, body {
  margin: 0px;
}

.slide {
  text-align: center;
  overflow: hidden;
  display: grid;
  grid-template-rows:auto minmax(0,1fr); /* added */
  height: 100vh;
  min-height: 300px;
}

.slide > div:first-child {
  padding: 1rem 0rem 2rem;
}

.slide > div:last-child {
  height: 100%; /* added */
  display:flex; /* added */
}

.slide > div:last-child img {
  max-height: 350px;
  margin-right: auto;
  margin-left: auto;
  height: 100%;
  margin-top: auto; /* moved here */
  object-fit: contain; /* added */
  object-position: bottom; /* added */
  max-width: 100%; /* added */
}

.slide-2 {
  background: #fafafa;
  border-top: 1px solid #eee;
}
<div class="slide">    
    <div>
        <h2>Pellentesque habitant morbi</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis fermentum gravida tincidunt.<br/>Integer sed consequat erat, non facilisis est. Etiam vel quam id ligula tempor feugiat vel in urna.</p>

        <a href="#">Etiam vel</a>
    </div>

    <div>
        <img src="https://picsum.photos/400/300" />
    </div>
</div>

<div class="slide slide-2">    
    <div>
        <h2>Pellentesque habitant morbi</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis fermentum gravida tincidunt.<br/>Integer sed consequat erat, non facilisis est. Etiam vel quam id ligula tempor feugiat vel in urna.</p>

        <a href="#">Etiam vel</a>
    </div>

    <div>
        <img src="https://picsum.photos/400/300" />
    </div>
</div>

推荐阅读