ホームページ > 記事 > ウェブフロントエンド > div内のimgは解像度に応じて中央に表示され、余分な部分はhidden_html/css_WEB-ITnose
div内のimgは解像度に応じて中央に表示され、余分な部分はhidden_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:49:541511ブラウズ
div で img 画像の中央表示を制御します。以下のように、解像度が 1920 を超えると、黄色の領域が中央に表示されます。 、中央に表示される黄色の画像の緑色の領域のサイズが表示されます。解像度が 1024 の場合、黄色の画像は中央のピンクの領域と同じ大きさで表示されます。
コード形式は dc6dce4a544fdca2df29d5ac0ea9906ba1f02c36ba31691bcfe87b2722de723b16b28748ea4df4d9c2150843fecfba68 にしてください。 IE Google Chrome と互換性があります
ディスカッションに返信 (解決策)
<div><img src="http://avatar.csdn.net/B/5/B/1_z549903832.jpg"/></div><style> div{width:50px;height:200px;background:red;position:relative;overflow:hidden;} img{margin:-50px 0px 0px -50px/*img宽度高度的一半*/;top:50%;left:50%;position:absolute;}</style>
コード形式は dc6dce4a544fdca2df29d5ac0ea9906ba1f02c36ba31691bcfe87b2722de723b16b28748ea4df4d9c2150843fecfba68 にする必要があります。 IE Google Chrome と互換性があります
背景は中央に配置されます。互換性のないブラウザはありますか?
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。