html - 超过父宽度的全宽元素 - 但具有最大宽度

Question

我使用此设置使英雄元素超过整个页面宽度：Html：

main {
    max-width: 600px;
    margin: 0 auto;
}
    
.full-width {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

<main>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tempor...</p>
    <figure class="full-width">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/hero.jpg" alt="">
        <figcaption>Some text.</figcaption>
    </figure>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tempor...</p>
</main>

但我想设置一个最大宽度，所以如果屏幕超过 2000 像素，那么停止使“全宽”元素全宽，而是只有 2000 像素宽并居中（并且仍然超过父元素的宽度）。我怎样才能做到这一点？

我试过：

@media (min-width: 2000px) {
  .full-width {
    max-width: 2000px;
  }
}

但它只是将元素推到一侧。

JsFiddle 在这里。

标签： htmlcss

Answer 1

这是因为利润。你可以使用，

   .full-width{
    width: 100%,
    margin: 0px
    }

并且还使用

Padding : 0px

如果需要，在父母中。