Question

我希望将多个div中的图像设置为全宽。

我在之前关于这个主题的答案中做了一些研究，但它在某种程度上对我不起作用。所以这是我的情况：

在页面https://maisoncyclo.ch/collections/de-marchi上我想让顶部图像的全宽度达到原始尺寸（最大100％，2048x2048像素）。问题是这个图像在<p>和content-div之内，因此尊重其父母的边缘。

将此图片全宽度设置为用户浏览器尺寸的解决方案是什么？

如果我为这种类型的图像添加一个新的CSS-Class，这个元素需要什么CSS代码？

当前HTML：

<div id="collection-description" class="desktop-push-2 desktop-8 tablet-6 mobile-3">

<div class="rte">
<p style="text-align: left;"><img src="//cdn.shopify.com/s/files/1/1129/3176/files/DEMARCHI_Header_2048x2048.jpg?9976235918523909588" alt="De Marchi Italien"></p>

当前CSS：

img {
    max-width: 100%;
    border: 0;
}
* {
    margin: 0;
}
*, *:after {
    box-sizing: border-box;
}
Inherited from p
Style Attribute {
    text-align: left;
}
p {
    font-size: 16px;
    margin-bottom: 2em;
}

Inherited from div.rte
.rte {
    text-align: left;
}
Inherited from body.gridlock.collection
body {
    color: #000000;
    background: #ffffff;
    font-size: 16px;
    font-family: Nitti Light, Courier, monospace;
    line-height: 1.5em;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;`

最佳，丹尼尔

Answer 1

它更像是一个黑客而不是一个真正的解决方案，但如果你不能改变html结构，我就会使用它。

 public static int milage;


 //********************
public class ExampleClass
{

  //..............

  Car c = new Car();   // new car object
  int milage = c.milage;  //access the static variable
}

-

<强>替代

更合适的解决方案是将图像放在容器div之外，以设置内容宽度。

下面是一个使用Bootstrap的简单示例

＆＃13;

.rte > p > img {
    position: relative;
    left: -50%;
    max-width: none;
}

＆＃13;

.full-w-img > img {
  display:block;
  width:100%;
}

h1,p {
  padding:30px;
}

＆＃13;

通过忽略网格使图像全宽（但保持响应）

1 个答案: