resizeを使用して画像切り替えプレビュー機能を実装する方法

resizeを使用して画像切り替えプレビュー機能を実装する方法

要点

  • CSS resize プロパティを使用すると、要素のサイズ変更可能性を制御できます。
  • サイズ変更を使用してサブ要素の幅を動的に変更する

HTML:

<div class='picA'>
    <div class='picB'>
        <div 読み取り専用クラス = 'resizeElement'></div>
    </div>
</div>

SCSS:

html{
    背景: #ddd;
    高さ: 100%;
    幅: 100%;
}
.picA {
    背景画像: url(https://z3.ax1x.com/2021/08/17/fhJdpQ.png);
    背景サイズ: カバー;
    幅: 650ピクセル;
    高さ: 340ピクセル;
    境界線: 5px 実線 #f0e5ab;
    境界線の半径: 3px;
    ボックスの影: 0 0 1px #999, -2px 2px 3px rgba(0, 0, 0, 0.2);
    パディング: 0;
    マージン: 1rem 自動;
    位置: 相対的;
    オーバーフロー: 非表示;
}
.picB {
    背景画像: url(https://z3.ax1x.com/2021/08/17/fhJUfg.png);
    背景サイズ: カバー;
    高さ: 340ピクセル;
    位置: 絶対;
    上: 0;
    左: 0;
    最小幅: 0;
    最大幅: 650px;
    ボックスのサイズ: 境界線ボックス;
}
.picB:前{
    内容: "↔";
    位置: 絶対;
    背景: rgba(0, 0, 0, 0.5);
    フォントサイズ: 16px;
    色: 白;
    上: 0;
    右: 0;
    高さ: 100%;
    行の高さ: 340px;
}
.resizeElement{
    サイズ変更: 水平;
    オーバーフロー: スクロール;
    不透明度: 0;
    位置: 相対的;
    上位: 50%;
    左: 0px;
    高さ: 15px;
    最大幅: 650px;
    最小幅: 15px;
    幅: 0;
    カーソル: 移動;
    変換: スケールY(35);
    変換の原点: 中心 中心;
    アニメーション: デルタ 5 秒、通常のイーズインアウト 1 秒。
}
@keyframes デルタ {
    30% {
        幅: 0;
    }
    60% {
        幅: 350ピクセル;
    }
    100% {
        幅: 0;
    }
}

効果は以下のとおりです。

リサイズを使用して画像切り替えプレビュー機能を実装する方法についての記事はこれで終わりです。リサイズ画像切り替えプレビューの関連コンテンツについては、123WORDPRESS.COMの過去の記事を検索するか、以下の関連記事を引き続き閲覧してください。今後とも123WORDPRESS.COMをよろしくお願いいたします。

<<:  適応型ウェブページを設計および作成する方法

>>:  CentOS システムの rpm インストールと Nginx の設定

推薦する

入力が正しいにもかかわらず、MySQL 8.0 でアクセスが拒否される問題を解決する

最近、MySQL を学び始めました。インストールはスムーズに進み、インターネット上の既成のチュートリ...

CSS チュートリアル: CSS 属性メディア タイプ

スタイルシートの最も重要な機能の 1 つは、ページ、画面、電子シンセサイザーなどの複数のメディアに適...

Docker のコンテナ データ ボリュームの概要

目次Dockerコンテナのデータ量データボリュームの使用方法1: コマンド-vを使用して直接マウント...

HTML面接の質問の要約

1. doctypeの役割、厳密モードと混合モードの違い、そしてその重要性1. 構文形式: <...

Apache ab同時負荷ストレステストの実装方法

腹筋コマンドの原則Apache の ab コマンドは、マルチスレッドの同時リクエストをシミュレートし...

MySQLマスタースレーブデータベース構築方法の詳細な説明

この記事では、MySQL マスター/スレーブ データベースの構築方法について説明します。ご参考までに...

CSS3は、ズームと回転を実現するためにscale()とrotate()を使用します。

1. scale() メソッドズームとは「縮小」と「拡大」を意味します。 CSS3 では、scal...

ウェブサイトのコンテンツの一部を傍受するための iframe を実装するためのアイデアとコード

コードをコピーコードは次のとおりです。 <div スタイル="幅:630px;高さ:...

IEのクラッシュバグ

コードをコピーコードは次のとおりです。 <スタイル タイプ="text/css&qu...

Vueドロップダウンメニューのコンポーネント開発の詳細説明

この記事の例では、Vueドロップダウンメニューのコンポーネント開発の具体的なコードを参考までに共有し...

中国のウェブサイトユーザーエクスペリエンスランキング

<br />ユーザーエクスペリエンスは中国のウェブサイトでますます重視されており、ユーザ...

JavaScript の Set データ構造の詳細な説明

目次1. セットとは何か2. セットコンストラクタ2.1) 配列2.2) 文字列2.3) 議論2.4...

jQueryアニメーションを理解するのに役立つ記事

目次1. 要素の表示と非表示を制御する show() hide() 2. 要素の透明度を制御する f...

JavaScript ではおそらく switch 文を使う必要はない

目次スイッチも複雑なコードブロックもありませんPythonからのインスピレーション辞書を使用してスイ...