Question

我有一张图片，我把css样式margin-left:-50px和margin-right:-50px放在一起，但只是崩溃了，它应该更大。

有没有其他方法可以做到这一点？

为什么左右两侧的负边距都不正常？

代码：

<img class="myslide" src="img/text.jpg">

<Style>
    .myslide {
        margin-left:-50px;
        margin-right:-50px;
    }
</style>

Answer 1

我会避免以这种方式设置图像元素 - 与输入相同。它只是HTML中的特定元素。创建包装器，添加边距：0 -50px;宽度：自动; 然后将img指定为width：100％;

＆＃13;

.page {
  width: 100px;
  margin: 0 auto;
  padding: 50px 0;
  background-color: gray;
}
.wrapper {
  margin: 0 -50px;
}
.wrapper img {
  width: 100%;
}

＆＃13;

<div class="page">
  <div class="wrapper">
    <img src="http://www.dummyimage.com/200x100/000/fff/" />
  </div>
</div>

＆＃13;

Answer 2

图像是内联元素。尝试添加display：block; 对你的形象。您也可以尝试将其定位到父元素而不是负边距。

Answer 3

css语法错误，您在margin-left

之后忘记了;逗号

.myslide {
        margin-left:-50px;
        margin-right:-50px;
    }

为什么左右两侧的负余量不起作用？

3 个答案: