HTML CSS3は画像表示効果を引き伸ばさない

1. transform 属性を使用して、画像を拡大せずに表示します (パスの問題は必要に応じて修正する必要があります)。

html:

<div id="surface-div1">
<img :src="pic1" class="surface-img">
</div>

CS: ...

#サーフェスdiv1{
    位置: 相対的;
    幅: 372ピクセル;
    高さ: 175px;
    フロート: 左;
    上マージン: -34px;
    左マージン: 122px;
    カーソル: ポインタ;
    背景: url(../../../static/img/addheadpic.jpg)center center no-repeat;
    テキスト配置: 中央;
    境界線: 1px 実線 #CCCCCC;
    境界線の半径:6px;
    オーバーフロー: 非表示;
}
#surface-div1 画像{
    位置: 絶対;
    幅: 100%;
    上位: 50%;
    左: 0;
    変換: translateY(-50%) スケール(1);
    境界線:なし;
    境界線の半径: 6px;表示:テーブルセル
}

這里寫圖片描述

最終的な効果は、上の写真の左側に示されています。

2. Taobaoを参考に、display:table-cellとテキストサイズを使用して中心を制御します。

html:

<div id="surface-div">
  <div class="sur-div">
     <img :src="pic" class="surface-img">
  </div>
</div>

css:

#サーフェスdiv{
    位置: 相対的;
    幅: 372ピクセル;
    高さ: 372px;
    フロート: 左; 
    上マージン: -34px;
    左マージン: 122px;
    カーソル: ポインタ;
    背景: url(../../../static/img/addheadpic.jpg)center center no-repeat;
    テキスト配置: 中央;
    境界線: 1px 実線 #CCCCCC;
    境界線の半径:6px;
    オーバーフロー: 非表示;
}
.sur-div{
    表示: テーブルセル;
    テキスト配置: 中央;
    垂直位置合わせ: 中央;
    フォントサイズ: 12px;
    幅: 372ピクセル;
    高さ: 372px;
    オーバーフロー: 非表示;
}
#サーフェスdiv画像{   
    最大高さ: 100%;
    最大幅: 100%;
    垂直位置合わせ: 中央;
    境界線: 0;
}

這里寫圖片描述

効果は上の画像の左側に示されているとおりです。重要な点は、外側の div が正方形である必要があることです。
Taobaoの場合は次のようになります:

這里寫圖片描述

html css3 非伸縮画像の表示効果に関するこの記事はこれで終わりです。より関連性の高い html css3 非伸縮画像コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。皆様の今後の 123WORDPRESS.COM へのご支援をお待ちしております。

<<: トップナビゲーションバーメニューを作成するためのHTML+CSS

>>: HTML 選択ボックスのプレースホルダーの作成に関する問題