图片与 div 主边框重叠

Question

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>

Answer 1

对于position: absolute;你还需要用top/bottomand/orleft/right.[=17来指定你的定位=]

.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>

图片与 div 主边框重叠

image overlaping with main div border

html

css

containers

image

border