图像与主 div 边框重叠答案

【问题标题】：image overlaping with main div border图像与主 div 边框重叠
【发布时间】：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="#" alt="#">
  <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实际指定它的位置。你需要这样做才能达到你想要的定位。

标签： html css image containers border

【解决方案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="#" alt="#">
  <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>

【讨论】：

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