爲什麼只是將css樣式複製爲新樣式，並指新樣式原因圖像不顯示

Question

我試圖對我購買的html模板進行修改。

該模板可讓您顯示圖像網格，並且當您將鼠標移動到圖像上方時，它們會稍微放大，以清晰顯示您正在查看的內容。該模板最初設計用於正方形（350像素x 350像素大小），但大多數圖像的寬高比爲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> 

不過我也有在3一些圖片：4長寬比這些看起來可怕與標準的CSS，因爲圖像被展開以適應可用寬度並失去大部分垂直圖像。

<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"> 
     <img src="photos/300x400/image3.jpg"> 
    </div><!-- img --> 
    </div> 
</div> 

如果我刪除class =「IMG」，從全新的3：4圖像，然後它看起來不錯，但是當你將鼠標懸停在它當然沒有發生。

所以我的計劃是製作一個引用.img的css樣式的副本，並調用它們.img2，然後讓第三個圖像使用class =「img2」。但是，如果我只是複製類wihtout甚至進行修改，即只需添加以下的CSS

/* line 913, sass/style.scss */ 
.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; 
} 

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

    /* line 923, sass/style.scss */ 
    .progect_img .img2 .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 .img2 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; 
    } 

，改變自己的網頁

<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> 

最後的圖像只是不顯示在所有的，我無法捉摸爲什麼會這樣。

你可以看一下問題頁的http://www.secretdorsetphoto.com/portfolio_devon.html

更新 好了，它將覆蓋線樣式如下工作

<div class="img" style="min-width:225px"> 
    <img src="photos/300x400/Beer Rocks.jpg" alt="pfoto"> 
</div> 

但創建一個風格正好覆蓋問題設置

.project_img .img .portrait { 
    min-width: 225px 
} 

並使用爲

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

由安良不工作對我來說

在回答打擊，作爲描述的問題的多重類語法（類=「IMG項目」）？

我不能做

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

，因爲這難道不停止CSS defnitions射擊，因爲現在IMG是直接在肖像類不是IMG類

.progect_img .img img 

Answer 1

它可能無法識別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 

使

nth-last-child(odd) 

Answer 2

我會盡量避免刪除模板中使用的類。 因此，不是從div中刪除類「img」，而是用「img2」替換它，爲什麼不僅僅是添加了一個類，例如「高」或「比率3乘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> 

你的CSS看起來就像這樣：

/* ... 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和.tall之間沒有空間

如果你得到正確的選擇器（即它們匹配所需的元素），但fo r某些原因事情仍然不起作用，那麼你可以嘗試加入!importantWhat does !important in CSS mean?。
這裏是相同的CSS與添加的!important：

/* ... 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; 
    */ 
} 

我沒有實際測試過任何東西，關於很抱歉。