當我在具有固定寬度和高度的容器中插入圖像時,圖像會伸展以適合該空間。有沒有辦法以正常尺寸顯示圖像,但剪輯過多?裁剪圖像而不是拉伸它
4
A
回答
0
顯示它作爲背景圖像
7
<div style="width: 100px; height: 100px; background-image: url(your image); background-repeat: no-repeat;"></div>
然後在上面DIV你可以用CSS玩
- 寬/高
- 背景位置
創建不同的作物效應。
0
使用此: http://www.w3schools.com/css/pr_background-position.asp
背景位置:5px的5px的;
然後設置div的高度和寬度
height:55px;
width:55px;
2
您可以使用CSS屬性clip
:
#image_element
{
position:absolute;
clip:rect(0px,60px,200px,0px);
}
使用clip
的缺點是,該元素是絕對定位,並且僅適用於「矩形」形狀。
請參見:
8
現代的方法是使用object-fit: none;
(或更常見的object-fit: cover;
如果你想擴展,但不拉伸)。瀏覽器的
img {
object-fit: cover;
}
74%支持這個2016十一月的 - Can I use?
相關問題
- 1. 裁剪而不是裁剪
- 2. 裁剪UIImage方向/拉伸
- 3. 使用矩形幾何不拉伸的圖像剪裁
- 4. 縮小圖像而不是拉伸
- 5. 裁剪圖像,保存它
- 6. 爲什麼我的圖像在裁剪時會拉伸?
- 7. CSS:圖像拉伸到正方形,如何裁剪?
- 8. 如何在裁剪之前裁剪大尺寸圖像而不裁剪?
- 9. 裁剪圖像
- 10. 裁剪圖像
- 11. css或Javascript重複圖像而不裁剪它
- 12. GPUImageTransformFilter是裁剪圖像,而不是比例縮小
- 13. Codeigniter圖像不裁剪
- 14. 裁剪圖像 - 不工作
- 15. 無法剪裁/裁剪圖像
- 16. 如何裁剪HTML頁面,而不是圖像
- 17. WPF圖像裁剪
- 18. html5圖像裁剪
- 19. WPF圖像裁剪
- 20. 笨裁剪圖像
- 21. 裁剪android圖像
- 22. GWT圖像裁剪
- 23. Silverlight圖像裁剪
- 24. 裁剪YUV圖像
- 25. raphael.js裁剪圖像
- 26. PIL裁剪和粘貼問題:裁剪不會創建裁剪圖像
- 27. 拉伸圖像
- 28. 圖像拉伸
- 29. 圖像裁剪使用jquery真棒裁剪,不工作
- 30. PHP裁剪不起作用,返回黑色圖像 - 圖像裁剪系統