时间戳

首页 > 解决方案 > 在css中对齐图像

html - 在css中对齐图像

问题描述

我想按以下方式对齐图像。

我有一个父容器 div，里面有 3 个孩子。“标题文本 1” div、图像 div 和“标题文本 2” div。

一件事是我不想裁剪图像。而且我不希望页面滚动。

 <div
    style={{
      height: "100vh",
      display: "flex",
      flexDirection: "column",
      alignItems: "center",
      padding: "32px",
    }}
  >
    <div>Title Text 1</div>
    <div style={{ flex: "1" }}>
      <img
        style={{ width: "auto", height: "100%", objectFit: "contain" }}
        src="https://i.insider.com/59d1a7abd7605b4b008b4898?width=1100&format=jpeg&auto=webp"
      />
    </div>
    <div>Title Text 2</div>
  </div>

在此处输入图像描述

标签： htmlcss

解决方案

只需为图像和父 div 添加一个小技巧，一切都会好起来的。

  • 首先添加position: relative到图像父级的div
  • 将以下代码添加position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); max-width: 100%; max-height: 100%;到 img 标签中以进行居中并仍然保持图像比例。哦，先删除那里的所有代码。

推荐阅读