試圖防止圖像溢出

相框包含以3x4列顯示的圖像。
圖像溢出相框，我似乎無法阻止他們。
我在相框上使用了「溢出」，但我一直得到相同的結果。試圖防止圖像溢出

如何防止照片溢出相框？

的style.css

.screenFrame { 
    width: 350px; 
    height: 475px; 
    background-color: #FDF6C2; 
    margin: 0 auto; 
    } 
    .photoFrame { 
    overflow-y: scroll; 
    } 
    .bookPhoto { 
     width: 100px; 
     height: 113px; 
     margin: 0 5px; 
    }

photos.html

<div class="screenFrame"> 
    <div id="photoFrame" class="photoFrame"> 
     <a class="bookInfo" href="#"><img class="bookPhoto" src="mySrc" alt="" /></a> 
     etc 
    </div> 
</div>

來源

2013-03-13 user1460015

爲什麼圖像不在相框元素內？ – 2013-03-13 19:27:02

您的圖片標籤應該是''不是'' – Axel 2013-03-13 19:27:08

語法錯誤。問題依然存在。 – user1460015 2013-03-13 19:34:56

兩件事情，一個，你只是在photoframe div上設置overflow-y，所以它會自動沿x方向延伸。你也需要處理x方向。

此外，如果img元素的高度和寬度與樣式指定的大小不一樣，則會縮放/壓縮/扭曲圖像。如果這不是您想要的，請嘗試使用max-height和max-width。

嘗試這些樣式，看看，結果會更好：

.photoFrame { 
    overflow:hidden; 
    height: 113px; 
    width: 120px; 
} 
.bookPhoto { 
    max-height: 113px; 
    max-width: 110px; 
    margin: 0 5px; 
}

（數碼相框寬度是120而不是110佔每側5px的保證金），如果你想爲圖像滾動
那大於幀大小，使用溢出：滾動。如果您不希望圖像縮放，而不是爲.bookPhoto設置寬度和高度，請使用剪輯矩形：

.bookPhoto { 
    clip(0px, 113px, 110px, 0px); 
    margin: 0 5px; 
}

來源

2013-03-13 20:27:17

感謝您的詳細解答 – user1460015 2013-03-13 20:39:14

肯定的事情，祝您好運。如果你想在一個方向上滾動（比如垂直），你可以做overflow-y：scroll; overflow-x：隱藏。 – 2013-03-14 05:35:00

我不認爲你的標記是正確的。

您將overflow-y設置爲.photoFrame，但代碼中的圖像標記位於.photoframe div之外。

嘗試將其更改爲這樣：

<div class="screenFrame"> 
    <div id="photoFrame" class="photoFrame"> 
     <a class="bookInfo" href="#"><img class="bookPhoto" src="mySrc" /></a> 
    </div> 
</div>

我也正常關閉您的<img>標籤。您不使用</img>關閉圖像標籤。

來源

2013-03-13 19:28:58 Axel

感謝您的回答，但我犯了一個語法錯誤。我將其固定在上面，但問題仍然存在。 – user1460015 2013-03-13 19:57:52

據我可以告訴你永遠不會過去，因爲你還沒有爲.photoframe定義邊界。它應該有一個特定的寬度和高度，我猜100％都是。而且你也沒有指定#photoframe，也可能有一些樣式。

來源

2013-03-13 20:18:10

添加寬度和高度。沒有溢出。謝謝 – user1460015 2013-03-13 20:19:29

試圖防止圖像溢出

回答

相關問題