我有以下影像：
在移動設備上，我希望這張圖片的右邊緣超過螢屏的右邊緣，所以影像的彎曲部分@right 被裁剪，但剩余的影像是 100% 寬。
是否可以使其包含的 div 為 100% 50px 寬？我試過了
width: calc(100% 50px)
但這沒有應用。
或者有沒有辦法裁剪影像，但使剩余部分全寬？
謝謝。
uj5u.com熱心網友回復：
你可以試試這個解決方案，HTML應該是這樣的。
<div class="container">
<div class="image" style="background-image:URL()"><img src=""></div>
</div>
該容器用于設定overflow:hidden. background-image用于確保當我們通過添加更改影像大小時影像不會被拉伸background-size:cover|contain。
要使影像向右超過 50 像素，您可以使用負邊距，注意您必須設定width:auto讓margin.width
uj5u.com熱心網友回復：
在影像的父容器上使用overflow: hidden;，所以代碼是這樣的
<div style="width: calc(100% - 150px); overflow: hidden;">
<img src="https://i.stack.imgur.com/61aIt.jpg"/>
</div>
uj5u.com熱心網友回復：
您也可以使用clip-path函式來裁剪影像，它還將保留容器的寬度。
這是影像裁剪的片段，您可以根據需要將其包裝在容器中。
img {
max-width: 100%;
clip-path: polygon(0 0, calc(100% - 50px) 0, calc(100% - 50px) 100%, 0% 100%);
}<img src="https://i.stack.imgur.com/61aIt.jpg" />uj5u.com熱心網友回復：
img {
max-width: 100%;
}
@media only screen and (max-width: 500px) {
img {
max-width: 100%;
--cropSize:50px;
clip-path: polygon(0 0, calc(100% - var(--cropSize)) 0, calc(100% - var(--cropSize)) 100%, 0% 100%);
}
}<img src="https://i.stack.imgur.com/61aIt.jpg" />- 如果需要，更改作物大小變數，
- 這里我們
clip-path用來裁剪大小 - 我們使用媒體螢屏檢查天氣設備是移動/桌面，全頁打開并 嘗試調整頁面寬度
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/421169.html
標籤：
下一篇：CSS網格側欄將不包含子項