CSS 位置图像答案

【问题标题】：CSS position imagesCSS 位置图像
【发布时间】：2021-02-16 10:30:17
【问题描述】：

我想创建 div，我可以在其中显示多个图像，如下图所示。

我面临的问题是，当我尝试在img 标签上使用position:absolute 时，我的外部div 的display:flex 破产了。有关如何执行此操作的任何建议？

编辑：

<div className={styles.imagePart}>
   <div className={styles.imageDiv}>
       <img src="/main1.svg" alt="" />
   </div>
   <div className={styles.imageDiv}>
        <img src="/main2.svg" alt="" />
   </div>
   <div className={styles.imageDiv}>
        <img src="/main3.svg" alt="" />
   </div>
   <div className={styles.imageDiv}>
        <img src="/main4.svg" alt="" />
   </div>
</div>

我试过的CSS：

.imagePart {
  text-align: center;
  display: flex;
}

.imageDiv{
  position: relative;
}

.imageDiv > img {
  width: 5vw;
  height: 20vw;
}

我试图在img 标签中添加postion:absolute。但随后每个img 都向左并相互重叠。

【问题讨论】：

请显示您的代码以及您尝试过的内容。就目前而言，这个问题太宽泛了。请阅读how to create a minimal reproducible example。
尝试将width: 5vw;移动到.imageDiv并设置.imageDiv > imgwidth: 100%。

标签： css image css-position

【解决方案1】：

要使用absolute 定位元素（在您的情况下为图像），您可能希望指定其包装容器的位置为relative。这确保了 absolute img 元素将它们的 absolute top, bottom... 与包装器 relative 元素对齐。

简而言之，你可以想象如下结构：

<flex container>
  <relative wrapper>
    <absolute img />
  </relative wrapper>
  <relative wrapper>
    <absolute img />
  </relative wrapper>
  ... other elements ...
</flex container>

下面是一个使用弹性容器和用div 元素包裹的绝对图像的示例，其中position 是relative。（另请注意，包装器 div 应与其子 img 具有相同的宽度）

.container {
  margin-top: 5rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container__img, img {
  width: 5rem;
}

.container__img {
  position: relative;
}

.img1 {
  position: absolute;
  top: -10px;
}

.img2 {
  position: absolute;
  top: 1.7rem;
}

.img3 {
  position: absolute;
  top: 5px;
}

.img4 {
  position: absolute;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Flexbox and Absolute</title>
</head>
<body>
  <div class="container">
    <div class="container__img">
      <img class="img1" src="https://post.healthline.com/wp-content/uploads/2020/09/healthy-eating-ingredients-1200x628-facebook-1200x628.jpg" alt="image 1" />
    </div>
    <div class="container__img">
      <img class="img2" src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcS24wvA9ozipJc5-IStQrqZIo_a3urpEZGIGA&usqp=CAU" alt="image 2" />
    </div>
    <div class="container__img">
      <img class="img3" src="https://www.besthealthmag.ca/wp-content/uploads/2019/07/junk-food-1.gif" alt="image 3" />
    </div>
    <div class="container__img">
      <img class="img4" src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRhdHVJQDoKTWnLuq-pAByiBK0gcu0PGI9WYw&usqp=CAU" alt="image 4" />
    </div>
  </div>
</body>
</html>

【讨论】：

【解决方案2】：

嗨，伙计，我不知道这是否正是您想要的，但您可以通过 mask-image: 来实现该效果：或剪辑路径，但我确实喜欢这种效果，只是有一些简单的属性，你可以看到下面的代码：

#HTML
<div class="container">
<div class="img1"></div>
<div class="img2"></div>
<div class="img3"></div>
<div class="img4"></div>
</div>

#CSS
.container{
display:flex;
justify-content:center;
background-color:#333;
padding:3rem;
margin:auto;
}
.img1{background:url("https://upload.wikimedia.org/wikipedia/commons/thumb/1/1c/Image_du_Maroc_3.jpg/800px-Image_du_Maroc_3.jpg") no-repeat center center/cover;
width:100px;
box-shadow:1px 3px 10px -5px white;
height:200px;
margin:.5rem;
border-radius: .4em 1.3em 1.5em 1em ;
overflow: hidden;
border-top-width:2px;
transform:skew(10deg,15deg);}

.img2{background:url("https://images.ctfassets.net/cnu0m8re1exe/1mRV2AKcshOa5pHKQ0Pjrb/647a4cc7da3ac5095cfc3202d70b318f/Man_Woman_Weight_Loss.jpg?w=650&h=433&fit=fill") no-repeat center center/cover;
width:100px;
box-shadow:1px 3px 10px -5px white;
height:200px;
margin:.2rem;
border-radius:  2em  1.3em 1em 1em ;
overflow: hidden;
box-shadow:1px 3px 10px -5px white;
border-top-width:2px;
transform:skew( 10deg,20deg);}

.img3{background:url("https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSuY1_PAAD0xRobQTyv8WEyDvMaCBKCHBS2GQ&usqp=CAU") no-repeat center center/cover;
width:100px;
box-shadow:1px 3px 10px -5px white;
height:200px;
margin:.6rem;
border-radius: 2em    .5em .3em 2em ;
overflow: hidden;
border-top-width:2px;
transform:skew( 10deg,20deg);}

.img4{background:url("https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTTKqXNmxNjYkI-iEVj9UhPXAVjsBdnON1NZw&usqp=CAU") no-repeat center center/cover;
width:90px;
height:250px;
margin:.8rem;
border-radius: 2em 3em 1em 1em ;
overflow: hidden;
box-shadow:1px 3px 10px -5px white;
border-top-width:2px;
transform:skew(10deg,15deg);}```
You can see the result of that & play around in codepen :


***I hope That It will Help You Thanks advance good luck***
Mahdi_Soultana[My_CodePen][1]
  [1]: https://codepen.io/mahdi-soultana/pen/rNLNyyp

【讨论】：