html - 如何使用继承的填充修复响应式图像显示

Question

我正在修改一个 joomla virtuemart 模板。我已将横幅图像添加到我放置在现有模块位置的自定义代码块中。因此，它继承了它周围的一些 css 属性，这些属性似乎给了它填充。我的横幅应该显示顶部菜单栏的整个宽度(您可以在这里看到它:https://www.artisanbelle.com)。我不知道如何删除填充和修复显示。它显示了正确的图像，宽度为 1920 像素，当我在预先存在的 slider 中显示相同的图像时，它很好地适应了菜单栏。

我试过的代码如下。这也是我第一次使用 srcset 和 sizes，所以如果我在那里做错了什么，请告诉我。

  <div class='illustrationz'>
    <img src='https://www.artisanbelle.com/images/stories/mainlg.jpg'
         srcset='https://www.artisanbelle.com/images/stories/mainxsm.jpg 600w,
         https://www.artisanbelle.com/images/stories/mainsm.jpg 960w,
         https://www.artisanbelle.com/images/stories/mainmd.jpg 1280w,
                 https://www.artisanbelle.com/images/stories/mainlg.jpg 1920w'
         sizes='(min-width: 600px) 960px, (min-width: 960px) 1280px, (min-width: 1280px) 1920px, 100vw'/>
  </div>
</div>

.illustrationz img {
  width: 100%;
  display: block;
}

.sectionz {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 0;
}

.headerz {
  height: auto;
  justify-content: inherit;
  align-items: inherit;
}

这是模板包装此部分的代码:

<div class="mod-slider-cont">
<div class="container">
<div class="inner-container">
<div class="custom" 

以及随之而来的模板 css。我找不到 mod-slider-cont:

.vpf-topbar .inner-container {
    border-bottom: 1px solid transparent;
    padding: 5px 0;
    margin-bottom: -1px;
}

#vpf-header .navbar .container .inner-container {
    padding-bottom: 20px;
    margin-bottom: -1px;
}

Answer 1

这里有一点格式问题，您可以使用它作为修复:

.illustrationz img {
   width: 100vw;  // Use viewport width here instead.
   display: block;
 }

虽然我看到它是这样使用的，但通常只使用 sizes 属性 rel=icon 并且您最好为此使用 css 媒体查询。