使用剪辑路径后无法移除图像周围的空白空间

我无法移除此剪切图像周围的空白空间。图像的原始大小是1200x800，但我想在页面的某个位置仅显示此图像的一小部分。但在后台，它仍然需要整个图像的大小来创建标题，图像和内容之间的所有空间。这里是我的Plunker code 使用剪辑路径后无法移除图像周围的空白空间

CSS

img { 
    max-width: 100%; 
    clip-path: inset(248px 0 238px 0); 
}

HTML

<body> 
    <h1>Header Here</h1> 
    <img src="http://via.placeholder.com/1200x800" alt="image" /> 
    <div> 
     Contrary to popular belief, Lorem Ipsum is not simply random text..... 
    </div> 
    </body>

来源

2017-10-16 Ravi Yadav

这根本不是剪辑路径的工作方式。它决定你的图像的哪一部分是_shown_，但它不会改变图像的尺寸。您的路径之外的部分实际上并未“切断”页面中的image_element_。 – CBroe

我不这么认为，这是可能的。您的图片占据了div空间，您正在显示图片的一部分。 –

啊..所以我必须现在采取两个不同的图像或有任何其他方式，我可以从同一图像获得此功能。我需要的是剪辑的部分和整个图像在同一页面上。 –

您可以使用此代码为您的解决方案： -

CSS： -

#img { 
    position: relative; 
    width: 800px; 
    height: 100px; 
    overflow: hidden; 
} 
img { 
    max-width: 100%; 
    position: absolute; 
    top: -220px; 
    left: 0; 
}

HTML： -

<div id="img"> 
    <img src="http://via.placeholder.com/1200x800" alt="image" /> 
</div>

来源

2017-10-16 12:39:59 Jayshree

使用剪辑路径后无法移除图像周围的空白空间

回答

相关问题