不知大家在做前端頁面的時候，有沒有遇到類似這樣的問題：有乙個不是正方形的，可能是寬度大於高度的，也可能是高度大於寬度的，而你又並不想用背景圖的方式來做，要實現用img標籤來讓此顯示出乙個正方形的且不變形的效果。即如下圖：只顯示中間部分（紅框部分）
下面我們便來簡單討論如何實現讓長方形顯示出正方形的效果，首先我們本次討論中用到的兩張的原圖就是上面的兩張（一張寬度大於高度，另一張高度大於寬度）
1、背景圖顯示正方形效果的做法
2、img標籤顯示正方形效果的做法首先、也是需要設定img標籤的寬度和高度是一致的，另外需要用到乙個關鍵的css屬性——object-fit:cover。下面還是直接貼出**:
3、object-fit的其它值那麼object-fit屬性還有哪些值呢？
object-fit: fill;
object-fit: contain;
object-fit: cover;
object-fit: none;
object-fit: scale-down;
fill: 中文釋義「填充」。預設值。替換內容拉伸填滿整個contentbox,不保證保持原有的比例。
contain: 中文釋義「包含」。保持原有尺寸比例。保證替換內容尺寸一定可以在容器裡面放得下。因此，此引數可能會在容器內留下空白。
cover: 中文釋義「覆蓋」。保持原有尺寸比例。保證替換內容尺寸一定大於容器尺寸，寬度和高度至少有乙個和容器一致。因此，此引數可能會讓替換內容（如）部分區域不可見（上面講解的例子就是如此）。
none: 中文釋義「無」。保持原有尺寸比例。同時保持替換內容原始尺寸大小。
scale-down: 中文釋義「降低」。就好像依次設定了none或contain, 最終呈現的是尺寸比較小的那個。
顯示文字,超過部分隱藏並使用省略號
在前端寫頁面的時候，經常會遇到文字內容過多，需要將超出範圍的內容用省略號來顯示。overflow hidden 超出的文字隱藏 text overflow ellipsis 溢位用省略號顯示 white space nowrap 溢位不換行 方法二 超過一行 這裡css樣式中，必須規定包裹內容的寬度...
視窗的部分顯示與隱藏
1.新增picture控制項 2.將picture控制項拖動成一條線，放到需要介面隱藏的部分的位置 3.新增按鈕的響應 1 static crect rectsmall,rectbig,rectseperator 靜態變數保留執行期間的值 隱藏後的矩形，隱藏前的矩形，分割線的矩形 2if rectb...
html文字超過的部分顯示為省略
1.單行文字超出省略 實現方式 overflow hidden white space nowrap 文字不會換行 text overflow ellipsis 顯示省略符號來代表被修剪的文字 實現 用css實現單行文字的溢位顯示省略號,同學你會嗎 p 實現效果 2.多行文字超出省略 實現方式 di...