Html 如何显示从下方剪切的20（像素或%）图像，以便不显示完整图片_Html_Css

Html 如何显示从下方剪切的20（像素或%）图像，以便不显示完整图片

html css

Html 如何显示从下方剪切的20（像素或%）图像，以便不显示完整图片,html,css,Html,Css,假设原始图片的高度是500px，宽度是400px。我想在网站上显示这张图片，这样在高度上只有480px可见。这是否可能使用css？非常感谢您是：将图像设置为元素的背景，并指定该元素的宽度和高度要进行裁剪，您可以尝试使用带有溢出：隐藏的的外部以及生成的设置宽度和高度，将图像放在其中，然后使用边距进行裁剪。边距值是原始高度和裁剪高度的差值，因此在您的情况下为20px 我在DIV上加了一个边框，这样你就可以看到它的位置了绝对位置就在那里，这样你就可以在它没有紧贴页面边缘时看到它如果您不知道图像

假设原始图片的高度是500px，宽度是400px。我想在网站上显示这张图片，这样在高度上只有480px可见。这是否可能使用css？非常感谢您

是：将图像设置为元素的背景，并指定该元素的宽度和高度

要进行裁剪，您可以尝试使用带有

溢出：隐藏的的外部
以及生成的设置宽度和高度，将图像放在其中，然后使用边距进行裁剪。边距值是原始高度和裁剪高度的差值，因此在您的情况下为20px

我在DIV上加了一个边框，这样你就可以看到它的位置了
绝对位置就在那里，这样你就可以在它没有紧贴页面边缘时看到它
如果您不知道图像的高度/宽度，请尝试Praveen的解决方案：
希望这有帮助
 如果您不知道图像的高度，需要剪切图像，则可以使用负边距和溢出：隐藏
（左侧为图像原样，右侧为裁剪图像）：
HTML
演示

查看演示：
似乎是更简单的解决方案，在这里，您可以使用背景位置
设置要裁剪图像的哪个部分。如果您不知道图像的高度，需要剪切图像，则可以使用负边距和溢出：隐藏
。看看我的答案！：）他只需要一张图片，而你只需要一页边距。我的叉子：@MusikAnimal，我刚刚展示了原始版本和裁剪版本以供比较，并排显示，仅供参考！！！不，我想，考虑到位置，
标记只对其中的普通字符数据有效，这让我有点困惑。看见
<div class="crop">
    <span><img src="http://images.gizmag.com/hero/windows8leak.jpg" /></span>
    <strong><img src="http://images.gizmag.com/hero/windows8leak.jpg" /></strong>
</div>

.crop {overflow: hidden;}
.crop strong {display: inline-block; overflow: hidden; margin-bottom: -50px;}
.crop strong img {display: block; margin-bottom: -20px;}