如何使用 CSS 在容器内正确缩放和定位图像

Question

我正在尝试创建一个 meme 页面，并在容器中装满图像。有些图像很宽，有些超长，我想以一种方式显示它们，使容器具有设定的大小（例如 50% 屏幕宽度，高度可以是自动的）并且内部图像被裁剪并居中。我觉得最好用一些照片来说明一下。

这就是我想要的：

这就是我得到的：

关键是如果图像太宽，则在顶部和底部出现这些白色条纹；如果图像太长，则在左侧和右侧出现这些白色条纹。

这是我的 CSS 代码：

.homePage {
  width: 100%;
  min-height: calc(100vh - 80px);
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 20px;
}

.homePage .post {
  width: 50%;
  background-color: rgb(250, 250, 250);
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  margin: 20px;
  padding: 20px;
  border-radius: 15px;
}

.post .postHeader {
  display: flex;
  justify-content: center;
  width: 100%;
}

.postHeader .title {
  flex: 50%;
}
.postHeader .deletePost {
  flex: 50%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.deletePost button {
  border: none;
  background: none;
  font-size: 30px;
  cursor: pointer;
}

.post .postImgContainer {
  word-wrap: break-word;
  height: auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content:center;
  overflow: hidden;
  overflow-y: auto;
}

还有我的 HTML 代码：

<div className="homePage">
      {imageLists.map((image) => {
        return (
          <div className="post">
            <div className="postHeader">
              <div className="title"></div>
            </div>
            <div className="postImgContainer">
              {" "}
              <img src={image}></img>{" "}
            </div>
          </div>
        );
      })}
</div>

每当我在 .postImgContainer 中将 flex-direction 从 column 更改为 row 时，它似乎工作正常，但仅针对一种图像，另一种图像被拉伸。

感谢您的帮助！

Answer 1

使用flex，您可以根据图片容器中规定的最大宽度和高度，将图片定位到想要的位置。我希望你能通过这个例子看清楚，如果你真的需要别的东西，请告诉我。

试试这个：

body {
  min-height: 100vh;
}

.container {
  width: 100%;
  background: blue;
}

.meme {
  width: 50%;
  margin: 15px auto;
  height: 600px;
  background: green;
  display: flex;
  justify-content: center;
  align-items: center;
}

.meme-img {
  max-height: 100%;
  max-width: 100%;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
  <div class="container">
    <div class="meme">
      <img src="https://cdn.pixabay.com/photo/2022/05/30/14/24/stairs-7231312_960_720.jpg" class="meme-img">
    </div>
    <div class="meme">
      <img src="https://cdn.pixabay.com/photo/2015/10/29/14/38/web-1012467_960_720.jpg" class="meme-img">
    </div>
  </div>
</body>
</html>

Answer 2

允许 CSS 背景发挥魔力。我们可以添加背景图像而不是实际图像，防止重复，居中并包含它。

看看我的（dumbed-down）版本：

.wrapper {
  /* let's pretend it's a square */
  height: 300px;
  width: 300px;
  /* the trick is background images (see HTML)
     we use some styles here to make it all work */
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  /* just for the demo */
  background-color: #f7f7f7;
  border-radius: 10px;
  box-shadow: 1px 2px 7px 0px rgba(0, 0, 0, .2);
}

<div class="wrapper" style="background-image: url(https://picsum.photos/600/300);"></div>
<p><!-- an empty spacer --></p>
<div class="wrapper" style="background-image: url(https://picsum.photos/300/600);"></div>

如何使用 CSS 在容器内正确缩放和定位图像

How to properly scale and position images inside of containers using CSS

html

javascript

css

flexbox

web