如何在具有填充的 div 中拥有全角图像

Question

Html：

<div class="myDiv">
    <img class="myImage" src="...." >
</div>

Css：

.myDiv {
    padding: 20px;
}
.myImage {
    max-width: 100%;
    height: auto;
    // ??
}

我不介意图像上方和下方会有空间（20px，因为容器将其作为填充）但是在宽度方面，我想突破填充并拥有div 的 100% 图像。这可能吗？

Answer 1

您可以在否定中使用边距。

.myImage{
  margin-left:-20px;
}

或

用位置来做

.myDiv {
    padding: 20px;
    position:relative;
}
.myImage {
    position:absolute;
    left:0;
    top:0; // or 20px as you want
    width:100%;
}

Answer 2

您有两种方法：

• 第一个：仅在一个轴上添加padding。

.myDiv {
    padding: 20px 0 ;
    width: 100px;
    height: 100px;
}
.myImage {
    width: 100%;
    height: 100%;
}

<div class="myDiv">
    <img class="myImage" src="http://www.hdbloggers.net/wp-content/uploads/2016/01/Background.png" >
</div>

• 第二个：使用负margin。

.myDiv {
    padding: 20px;
    width: 100px;
    height: 100px;
}
.myImage {
    margin: -20px;
    width: 100%;
    height: 100%;
}

<div class="myDiv">
    <img class="myImage" src="http://www.hdbloggers.net/wp-content/uploads/2016/01/Background.png" >
</div>

Answer 3

您也可以以不同的方式处理这个问题。您可以在全宽图像（由div 包含）中有一个填充的div，而不是在填充的div 中有一个全角图像。

.full-width-image {
  background: url('http://placehold.it/1920x1080') no-repeat center center;
}
.padded-div {
  padding: 50px;
}

<div class="full-width-image">
  <div class="padded-div">
    I am a padded div with a full-width background.
  </div>
</div>