css - 通过外部 div 容器中的 CSS 类更改 img 的属性

Question

我想通过 css 更改图像的属性。当我通过typo3 执行此操作时，我只能访问外部 div 容器（内容元素的自定义边框）。所以我将以下行添加到我的 css 文件中：

.Bild-Startseite img { width:50%; }

div 容器正在使用Bild-Startseite. 不幸的是，这不会改变 div 容器内图像的宽度......出了什么问题？

css文件在这里：http ://web182.theta.ibone.ch/klingler_ag/fileadmin/templates/css/screen/screen-PAGE-layout.css

以及带有 div 容器的站点：http ://web182.theta.ibone.ch/klingler_ag/home.html

谢谢

Answer 1

问题是更具体的选择器已经针对<img>：

#main img, 
#main audio, 
#main video, 
#main embed {
height: auto;
width: auto;
max-width: 100%;
/* ID's will always take precedence over classes */
}

您可以尝试!important在声明的末尾添加一条规则 .. 或将其添加为内联样式

.Bild-Startseite img {
 width: 50% !important; 
 }

Answer 2

有两种方法可以解决。

1.

.Bild-Startseite img { width: 50% !important; }

2.

#main img,
#main audio,
#main video,
#main embed {
    max-width:100%;
    height:auto;
}

in screen-PAGE-layout.css, remove width attribute.

Answer 3

这是有效的；只有其他一些具有更高特异性的 CSS 规则。

采用：

.Bild-Startseite img { width: 50% !important; }

覆盖width应用于此元素的所有其他内容。