在CSS中實現把圖片放在盒子右邊,可以通過以下步驟實現:
.box { position: relative; overflow: hidden; } .box img { position: absolute; top: 0; right: 0; height: 100%; width: auto; }
首先,我們需要給包含圖片的盒子設置相對定位,這樣圖片的絕對定位就相對于盒子進行。同時,需要將盒子的溢出部分隱藏,這樣圖片才能完全顯示在盒子內。
其次,我們將圖片的位置設置為絕對定位,并設置頂部和右邊的位置坐標為0,這樣圖片就會出現在盒子的右上角。同時,圖片的高度設置為100%,保證圖片始終填滿整個盒子的高度。圖片的寬度設置為auto,則寬度會自適應圖片的原始大小,不會出現拉伸或擠壓的情況。
這樣,在HTML中添加如下代碼即可實現將圖片放在盒子右邊:
上一篇css把右邊框的弧度取消
下一篇css把圖片改為圓形