Html 为什么只是将css样式复制为新样式并引用新样式会导致图像不显示

我正在尝试对我购买的html模板进行修改

该模板允许您显示图像网格，当您将鼠标移到图像上时，它们会略微放大，以便清楚地显示您所看到的内容。该模板最初是为正方形（350px 350px大小）设计的，但我的大多数图像的纵横比都是4:3，所以我将其调整为适用于400x300图像没有问题。下面是css的关键部分

/* line 881, sass/style.scss */
.progect_img {
  padding: 9% 0 0 0;
}

/* line 886, sass/style.scss */
.progect_img:after {
  content: "";
  display: block;
  clear: both;
}


/* line 913, sass/style.scss */
.progect_img .img {
  float: left;
  width: 33%;
  overflow: hidden;
  text-align: center;
  margin: 0 0 6% 0;
  max-height: 300px;
  cursor: pointer;
  line-height: 300px;
  position: relative;
}

/* line 1948, sass/style.scss */
.progect_img  .img:hover .bg {
  -webkit-transform: scale(1.05);
  -moz-transform: scale(1.05);
  transform: scale(1.05);
}

/* line 923, sass/style.scss */
.progect_img .img .bg {
  display: block;
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -40%;
  background-position: center;
  background-size: cover;
  width: 80%;
  height: 100%;
  -webkit-transition: all 0.6s 0.1s;
  -moz-transition: all 0.6s 0.1s;
  -o-transition: all 0.6s 0.1s;
  -ms-transition: all 0.6s 0.1s;
  transition: all 0.6s 0.1s;
}

/* line 944, sass/style.scss */
.progect_img .img img {
  max-width: 100%;
  max-height: 100%;
  vertical-align: middle;
  opacity: 0;
  -webkit-transition: all 0.6s 0.1s;
  -moz-transition: all 0.6s 0.1s;
  -o-transition: all 0.6s 0.1s;
  -ms-transition: all 0.6s 0.1s;
  transition: all 0.6s 0.1s;
  position: relative;
  z-index: 1;
}

html将使用以下内容：

<div class="progect_img">
    <div class="img">
        <img src="photos/400x300/image1.jpg">
    </div><!-- img -->
    <div class="img">
        <img src="photos/400x300/image2.jpg">
    </div><!-- img -->
  </div>
</div>

并将我的网页更改为

<div class="progect_img">
        <div class="img">
            <img src="photos/400x300/image1.jpg">
        </div><!-- img -->
        <div class="img">
            <img src="photos/400x300/image2.jpg">
        </div><!-- img -->
        <div class="img2">
            <img src="photos/300x400/image3.jpg">
        </div><!-- img -->
      </div>
    </div>

并用作

<div class="img portrait">
   <img src="photos/300x400/Beer Rocks.jpg" alt="pfoto">
</div>

---

它可能无法识别img2。尝试在CSS中使用此选项来替换img2

progect_img:nth-last-child(odd) {...}

看看它是否能解决你的问题

替换这个

.progect_img .img2 {
float: left;
width: 33%;
overflow: hidden;
text-align: center;
margin: 0 0 6% 0;
max-height: 300px;
cursor: pointer;
line-height: 300px;
position: relative;
}

用这个

.progect_img:nth-last-child(odd) {
float: left;
width: 33%;
overflow: hidden;
text-align: center;
margin: 0 0 6% 0;
max-height: 300px;
cursor: pointer;
line-height: 300px;
position: relative;
} 

有什么事吗

img2

制造

---

我会尽量避免删除模板中使用的类。 因此，与其从div中删除类“img”并将其替换为“img2”，不如只添加一个类，例如“toll”或“ratio-3-by-4”。然后，您可以编写几行css来“修复”正在拉伸的图像。新的css选择器应该比现有的更具体，因此它们应该生效并覆盖所需的属性

您的html将如下所示：

<div class="progect_img">
    <div class="img">
        <img src="photos/400x300/image1.jpg">
    </div><!-- img -->
    <div class="img">
        <img src="photos/400x300/image2.jpg">
    </div><!-- img -->
    <div class="img tall">
        <img src="photos/300x400/image3.jpg">
    </div><!-- img -->
  </div>
</div>

/* ... the original css ... */

.project_img .img.tall {
    max-height: 400px;
    /* seems these are needed, but I'm not sure:
     line-height: 400px;
     max-width: 300px;
    */
}

编辑：请注意，选择器中的

.img

和

.toll

之间没有空格

如果选择器正确（即，它们与所需元素匹配），但由于某些原因，仍然无法正常工作，则可以尝试添加

！重要信息

下面是添加了

的相同css！重要信息

：

/* ... the original css ... */

.project_img .img.tall {
    max-height: 400px !important;
    /* seems these are needed, but I'm not sure:
     line-height: 400px !important;
     max-width: 300px !important;
    */
}

---

我还没有测试过任何东西，所以很抱歉。

对不起，我应该把它放在哪里，在html中？抱歉，我更正了它，它前面应该有你的程序。抱歉，我不明白你想要我做什么。实际上，它可以找到img2类，因为如果我引用不存在的类，例如img3，那么图像不会消失。为什么你认为它不能识别img2？我没有删除。img只是添加了。img2你包含的最后一个html如果它被移除了，我就从那里开始工作。你的方法给了我解决问题的想法，但我无法让你更简洁的方法发挥作用，我更新了我的问题，如果你能看看为什么你认为这可以解决问题，为什么你认为OP最初的方法不起作用？@torazaburo，因为我的解决方案起作用了——看最后几张图片，查看源代码，而在css中使用额外的css样式不起作用。

.progect_img .img2 {
float: left;
width: 33%;
overflow: hidden;
text-align: center;
margin: 0 0 6% 0;
max-height: 300px;
cursor: pointer;
line-height: 300px;
position: relative;
}

.progect_img:nth-last-child(odd) {
float: left;
width: 33%;
overflow: hidden;
text-align: center;
margin: 0 0 6% 0;
max-height: 300px;
cursor: pointer;
line-height: 300px;
position: relative;
} 

img2

nth-last-child(odd)

<div class="progect_img">
    <div class="img">
        <img src="photos/400x300/image1.jpg">
    </div><!-- img -->
    <div class="img">
        <img src="photos/400x300/image2.jpg">
    </div><!-- img -->
    <div class="img tall">
        <img src="photos/300x400/image3.jpg">
    </div><!-- img -->
  </div>
</div>

/* ... the original css ... */

.project_img .img.tall {
    max-height: 400px;
    /* seems these are needed, but I'm not sure:
     line-height: 400px;
     max-width: 300px;
    */
}

/* ... the original css ... */

.project_img .img.tall {
    max-height: 400px !important;
    /* seems these are needed, but I'm not sure:
     line-height: 400px !important;
     max-width: 300px !important;
    */
}