コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > jsチュートリアル > div で画像の適応サイズを実現する Pure js (テスト済み、Firefox と互換性あり)_JavaScript スキル

div で画像の適応サイズを実現する Pure js (テスト済み、Firefox と互換性あり)_JavaScript スキル

WBOY
リリース： 2016-05-16 16:44:23
オリジナル
1217 人が閲覧しました

このコードによって実装された機能は、img イメージのサイズが不明で、div のサイズが不明なときに、img を含む div に遭遇したときに、イメージ自体が小さい場合にイメージをそのサイズに適応させることです。 div コンテナのサイズを超えている場合、処理は行われません。伸ばすと画像が歪む可能性があるためです。

早速、コードに進みましょう。テスト済みで、Firefox、Google、IE6、IE7/8 と互換性があります。

以下は js コードです:

コードをコピーします コードは次のとおりです:




以下は HTML コードです:




コードをコピー


コードは次のとおりです:


以下は CSS コードです: コードをコピーします

コードは次のとおりです:

.sy_pic{ width:200px; height:300px; align:center;}
画像アドレスは自分で変更してください。ご質問やアドバイスがある場合は、QQ グループにご参加ください: 255708401。
関連ラベル：
写真 適応サイズ
ソース：php.cn
前の記事：jQuery画像切り替えプラグイン jquery.cycle.js 使用例_jquery 次の記事：複数選択 複数使用例_JavaScript スキル
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
CSS マインド マッピングに関するコースウェアはどこにありますか? コースウェア
から 2024-04-16 10:10:18
0
0
1335
単語と一致する正規表現 新しいジョブ名をデータベース内の既存のジョブ名と照合しようとするスクリプトがあります。 SELECTa.titleASJobTitle,j.DescriptionASMatched...
から 2024-04-06 21:24:04
0
1
606
Javafx でインライン CSS スタイルを動的に変更する アプリケーションが最大化されているときにペインの背景画像を変更しようとしています。私の背景はインライン CSS を使用して設定されています。スタイル用に 2 つの異なる変数と if...
から 2024-04-06 20:57:16
0
1
487
グリッドを使用してこの特定のデザインを作成する: ステップバイステップ ガイド この画像に似たレイアウトを作成しようとしています。このグリッドを使用してみましたが、実現できません。 <ulclass="container">&l...
から 2024-04-06 20:29:08
0
2
492
モバイル ビューで、ユーザーがリンクをクリックしたときにこのナビゲーション バーを閉じるにはどうすればよいですか? ユーザーがリンクをクリックして Web サイトを閲覧すると、ナビゲーション バーが閉じませんか?ナビゲーション バーを閉じるために、クリック イベント リスナーを各リンクに追加しよ...
から 2024-04-06 19:23:03
0
1
411
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート