画像拡大後のオーバーフローを非表示にするCSSの設定方法-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

画像拡大後のオーバーフローを非表示にするCSSの設定方法

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Dec 10, 2021 pm 06:21 PM

css

方法: 1. 画像要素に「transform:scale (水平スケーリング値、垂直スケーリング値)」スタイルを追加して画像を拡大します。 2. overflow 属性を使用して画像のはみ出した部分を非表示にします。構文は「絵要素の親要素{overflow:hidden;}」です。

画像拡大後のオーバーフローを非表示にするCSSの設定方法

このチュートリアルの動作環境: Windows 10 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。

css で画像を拡大した後にオーバーフローを非表示にする方法

css では、transform 属性を使用して画像を拡大できます。この属性をスケール関数と組み合わせて使用すると、要素を拡大縮小できます。構文は次のとおりです:

图片元素{transform:scale(横向缩放值,竖向缩放值);}

その後、オーバーフロー属性を使用して余分な部分を非表示にします。この属性はスタイルを設定するために使用されます要素のその先の要素の属性値が非表示の場合は非表示になります。

構文は次のとおりです:

元素{overflow:hidden;}

例は次のとおりです:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    div{
      width:500px;
      height:300px;
      border:1px solid #000;
      overflow:hidden;
    }
    img{
      transform:scale(1.5,1.5);
    }
  </style>
</head>
<body>
  <div><img src="/static/imghwm/default1.png"  data-src="1118.02.png"  class="lazy"   alt=""></div>
</body>
</html>

出力結果:

画像拡大後のオーバーフローを非表示にするCSSの設定方法

(学習ビデオの共有: css ビデオチュートリアル )

以上が画像拡大後のオーバーフローを非表示にするCSSの設定方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

非常に多くの色のリンクApr 13, 2025 am 11:36 AM

最近の色に関するツール、記事、リソースの実行がありました。あなたの楽しみのためにここにそれらを丸くすることで、私がいくつかのタブを閉じてもらいましょう。

FlexBoxでの自動マージンの仕組みApr 13, 2025 am 11:35 AM

ロビンは以前にこれをカバーしたことがありますが、私は過去数週間でそれについての混乱を聞いて、他の人がそれを説明することに刺されたのを見ました、そして私は望んでいました

動く虹色の下線Apr 13, 2025 am 11:27 AM

サンドイッチサイトのデザインが大好きです。多くの美しい特徴の中には、これらの見出しがあり、レインボーの下線が下線を描いて、スクロールするときに動きます。そうではありません

新年、新しい仕事？グリッド駆動の履歴書を作成しましょう！Apr 13, 2025 am 11:26 AM

多くの人気のある履歴書設計は、グリッド形状にセクションを配置することにより、利用可能なページスペースを最大限に活用しています。 CSSグリッドを使用して、レイアウトを作成しましょう

リロードしすぎるという習慣からユーザーを分解する1つの方法Apr 13, 2025 am 11:25 AM

ページのリロードは何かです。ページが反応しないと思われるとき、または新しいコンテンツが利用可能であると信じるときにページを更新することもあります。時々私たちはただ怒っています

Reactを使用したドメイン駆動型のデザインApr 13, 2025 am 11:22 AM

Reactの世界でフロントエンドアプリケーションを整理する方法に関するガイダンスはほとんどありません。（「正しいと感じる」までファイルを移動するだけです笑）。真実

非アクティブユーザーの検出Apr 13, 2025 am 11:08 AM

ほとんどの場合、ユーザーがアプリケーションに積極的に関与しているのか、一時的に非アクティブであるかを本当に気にしません。非アクティブ、意味、おそらく彼ら

Wufoo ZapierApr 13, 2025 am 11:02 AM

Wufooは常に統合に優れています。キャンペーンモニター、MailChimp、TypeKitなどの特定のアプリと統合されていますが、

See all articles

ホットAIツール

ホットツール

Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、