Img 标签冲突

Question

我正在建立一个网站，在登录页面上我有几张带有 javascript 交互的图片。这些是由 javascript 而不是 html 带来的，它们位于 css 上的 .img 上。

``` img{position: absolute; top: 500px; left: 400px; transform: translate(-50%, -50%) scale(0.2); animation: fadein 0.5s;} ```

在网站的第二页上，我有更多图片，但我使用 CSS 将它们作为网格与响应式等高图片放在一起。

.img {width: 100%; height: auto; vertical-align: middle;}

我的问题是第二页使用的是第一页的 .img 属性，而不是第二页，我不知道如何区分它们？

这是左侧页面的外观与外观的图片。

picture of what should be looking vs how it's looking

我的最后期限真的很紧迫，但我似乎无法解决这个问题，有人知道我能做什么吗？ :(

非常感谢！

Answer 1

img 选择器过于模糊，它将针对页面上的任何 img。你应该让它更具体。 您必须为每种情况创建不同的 CSS 类。

Answer 2

问题是您在 CSS 中使用 img { }。当您希望所有图像都以相同的方式设置样式时，这很好，但是您希望为单独的图像单独设置样式。为了克服这个问题，我们使用了选择器。

Use a class。类选择器只会对包含 class="" 的标签进行样式设置，在本例中为 <img> 标签

img.page1 {
    position: absolute;
    top: 500px;
    left: 400px;
    transform: translate(-50%, -50%) scale(0.2);
    animation: fadein 0.5s;
}

img.page2 {
    width: 100%;
    height: auto;
    vertical-align: middle;
}

现在，如果您将 class="page1" 和 class="page2" 分别添加到您的图像和/或容器中，则图像将使用 CSS 格式作为它们自己的类。

类似<img class="page1" src="my_image.jpg">

或者<div class="page1"> (<img> tags here...) </div> 也可以工作，并且可以节省您为每个<img> 标签放置类