缩放和居中不同尺寸的图像，在 CSS 中使用右对齐的文本

Question

我正在尝试创建一个页面，其中图像在左侧，标题（文本）在右侧，图像/文本组合一起位于页面中心。 我面临的挑战是图像可以是任何大小或纵横比。 我需要尽可能大的图像（同时仍然适合屏幕而无需用户滚动）。 图像高度可以使用 javascript 确定（我使用的是 Angular）。 我在这里勾勒出三个场景：

图像可能是纵向（高度> 宽度）、横向（宽度> 高度）或全景图像（宽度> 高度，并且宽度异常宽）。 所有三种情况的一些注意事项：

1. 标题/文本应该是固定宽度（比如 300 像素），并且应该放在图像的右侧（它应该是可见的，用户不应该水平滚动）。
2. 图像的大小应尽可能大——高度应略小于屏幕高度（因此没有滚动条）。 在全景图像的情况下，高度将远小于屏幕高度，否则文本容器将被推离屏幕。
3. 图像和文本组合应位于屏幕中央。

希望草图应该澄清我在这里试图传达的内容。

我能够并排获得图像和文本，但无法在所有三种情况下将它们居中。

<div class="right-side">
    {{ caption }} 
</div>

<div class="left-side">
    <img [src]="imageUrl">
</div>

.left-side {
    float: none; 
    width: auto;
    overflow: hidden;
    text-align: center;

    img {
        margin: 40px;
        margin-right: 0;
        max-height: 80vh; 
        max-width: 80vw;
    }
}

.right-side {
    width: 400px;
    padding: 10px 40px;
    float: right;
    font-size: 16px;
}

Answer 1

CSS Flexbox比 CSS Grid系统有更多的跨浏览器支持，这里是一个仅用于图像目的的 CSS 对象适配示例！

 * { margin: 0; padding: 0; box-sizing: border-box; } .container { width: 70%; display: block; margin-top: 5%; margin-left: auto; margin-right: auto; } .article-container { display: flex; justify-content: space-between; } .left-side { flex-grow: 1; } .left-side img { width: 100%; height: 85vh; object-fit: cover; -o-object-fit: cover; } .right-side { width: 300px; margin-left: 30px; }

 <div class="container"> <div class="article-container"> <div class="left-side"> <img src="https://i.imgur.com/ZwaMNmO.jpg" alt="" /> </div> <div class="right-side"> <p> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sint magni voluptas laboriosam. Unde, est eos? </p> </div> </div> </div>

Answer 2

让我解释一下我的方法，据我所知，它可以解决您的要求。 首先我在 HTML 中声明左侧，然后声明右侧。 然后我决定使用 flex 来创建您的网格，然后使图像既响应横向图像又响应纵向图像。 我假设您的容器将具有固定宽度，但是如果您删除该静态宽度，它无论如何都会起作用（并且您无需添加 margin: 0 auto; 属性）。

我希望这能解决您的问题并鼓励您使用 flex 的力量！

 .left-side { text-align: center; } .left-side img { display: block; max-width: 100%; max-height: 90vh; width: auto; height: auto; } .right-side { padding: 10px; width: 300px; flex: 0 0 300px; } .container { max-width: 1200px; display: flex; justify-content: center; margin: 0 auto; }

 <div class="container"> <div class="left-side"> <img src="https://via.placeholder.com/500x1200"> </div> <div class="right-side"> {{ caption }} </div> </div>

Answer 3

我将从我的评论变成答案，因为它似乎很接近您的需求。

grid 可用于在屏幕上居中和重新排序。

例子 ：

 .body { display: grid; grid-template-columns: repeat(2, minmax(auto, max-content)); justify-content: center; grid-auto-flow: row dense; grid-gap: 1em; gap: 1em; } .right-side { grid-column: 2; max-width: 300px; } .left-side {} .left-side img { margin: 0 0 auto auto;/* will put at top right of its grid area */ max-width: calc(100vw - 300px - 4em); } /* only for demo/possible way to break things into a single column*/ @media screen and (max-width: 500px) { .body { display: block; } .left-side img { margin: 0 0 auto auto; max-width: 90vw; } .right-side { max-width: 90vw; } }

 <div class="body"> <div class="right-side"> <h1>HTML Ipsum Presents</h1> <p> <strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis. </p> <h2>Header Level 2</h2> </div> <div class="left-side"> <img src="http://dummyimage.com/200x400" /> </div> </div> <div class="body"> <div class="right-side"> <h1>HTML Ipsum Presents</h1> <p> <strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis. </p> <h2>Header Level 2</h2> </div> <div class="left-side"> <img src="http://dummyimage.com/800x400" /> </div> </div> <div class="body"> <div class="right-side"> <h1>HTML Ipsum Presents</h1> <p> <strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis. </p> <h2>Header Level 2</h2> </div> <div class="left-side"> <img src="http://dummyimage.com/1400x600" /> </div> </div>

笔玩： https : //codepen.io/gc-nomade/details/RwNXNRB