html中图片上下左右居中

awdSADASA 2024-07-02 15:07:48

实现在 HTML 中让图片上下左右居中、圆角和阴影效果可以通过以下代码实现：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>居中、圆角和阴影效果</title>
<style>
  /* 容器样式 */
  .container {
    width: 300px;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  /* 图片样式 */
  .centered-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover; /* 确保图片完全填充容器 */
    border-radius: 15px; /* 圆角 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 阴影效果 */
  }
</style>
</head>
<body>

<div class="container">
  <img src="your-image.jpg" alt="居中的图片" class="centered-img">
</div>

</body>
</html>

解释说明：

HTML 结构：
- <div class="container"> 作为图片的容器，设置了固定的宽度和高度（这里示例设置为 300px × 300px），并使用 Flex 布局将图片水平垂直居中。
- <img> 标签作为要展示的图片，设置了一个 class="centered-img"，以便应用样式。
CSS 样式：
- .container 定义了容器的样式，使用 Flex 布局将其内容居中显示。
- .centered-img 定义了图片的样式：
  - display: block; 确保图片作为块级元素显示，以便设置宽度和高度。
  - width: 100%; height: 100%; 使图片填充整个容器。
  - object-fit: cover; 确保图片完全覆盖容器，保持其原始比例。
  - border-radius: 15px; 设置圆角为 15px。
  - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); 添加了一个淡淡的阴影效果，使图片在背景上更加突出。