图像与主 div 边框重叠

Posted 2023-03-06

【中文标题】图像与主 div 边框重叠

【英文标题】：image overlaping with main div border

【发布时间】：2021-11-18 00:45:36

【问题描述】：

div 中的图像应该适合 div，我可以做到这一点。但我努力的地方是让图像越过边界并且仍然包含在主 div 中。

.box 
    border: 2px solid #000;
    border-radius: 5px;
    font-family: sans-serif;
    max-width: 300px;
  position: relative;
  



.image 
position: absolute;  
max-width:100%;
max-height:100%;

<div class="box">
  <div class="image">
    <img class="box__image" src="#" >
  <div>
  
  <div class="random">
    <p class="box__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eu ipsum quis lacus sagittis vehicula eget sed diam. Nam quis sapien sem. Phasellus vehicula blandit nunc vel cursus. Nullam felis nisl, molestie ut ipsum sit amet, vulputate tempus nibh. </p>

   </div>
 </div>
 

【问题讨论】：

我看到你已经指定了position: absolute;，但你还没有用top或left实际指定它的位置。你需要这样做才能达到你想要的定位。

【参考方案1】：

对于position: absolute;，您还需要使用top/bottom 和/或left/right 指定您的定位。

.box 
    border: 2px solid #000;
    border-radius: 5px;
    font-family: sans-serif;
    max-width: 300px;
    position: relative;
  

.image 
    position: absolute;  
    max-width:100%;
    max-height:100%;
    top: -10px;

<div class="box">
  <div class="image">
    <img class="box__image" src="#" >
  <div>
  
  <div class="random">
    <p class="box__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eu ipsum quis lacus sagittis vehicula eget sed diam. Nam quis sapien sem. Phasellus vehicula blandit nunc vel cursus. Nullam felis nisl, molestie ut ipsum sit amet, vulputate tempus nibh. </p>

   </div>
 </div>

【讨论】：

您在更改图像宽度时遇到了什么困难？我想我不明白你想做什么以及我能提供什么帮助。