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 の設定

推薦する

Vue の計算プロパティ

目次1. 基本的な例2. 計算プロパティキャッシュとメソッド3. 計算プロパティセッター序文:通常、...

IE6では画像要素imgに余分な空白スペースがある

ページの DIV+CSS レイアウトを行う際、IE6 で画像要素 img の下に余分なスペースができ...

Alibaba Cloud Docker Yum ソースを使用した Docker 17.03.2 の CentOS7 オンラインインストールの詳細説明

参照ドキュメント公式 Docker インストール ドキュメント: https://docs.dock...

Docker での Redis のマスタースレーブ構成チュートリアルの詳細説明

1. Redisイメージを取得するdocker pull redis 2. それぞれポート6379、...

js における関数のネストとクロージャの詳細

目次1. 範囲2. 関数の戻り値3. 関数のネスト4. 終了5. クロージャの実用的応用1. 内部変...

crontab 実行時間とシステム時間の不一致の解決方法

序文LINUX では、定期的なタスクは通常、cron デーモン プロセス [ps -ef | gre...

Docker+Selenium Grid に基づく技術アプリケーションをテストするためのサンプル コード

Selenium Grid の紹介Selenium Grid のいくつかの新しい機能は、今後リリース...

チェックボックスの不確定プロパティの使用の紹介

Windows XP でフォルダーのプロパティ ダイアログ ボックスを使用すると、フォルダーの属性カ...

スタックメニューを実装するためのjQueryプラグイン

jQueryプラグインの毎日の積み重ねメニュー、参考までに、具体的な内容は次のとおりです。スタックメ...

Linux ssh サービス情報と実行ステータスを表示する方法

Linux での ssh サービス構成など、ssh サーバー構成に関する記事は多数あります。ここでは...

HTML の著作権記号のフォント選択問題 (著作権記号をより美しくする方法)

1. 問題を発見する&copy; は HTML の著作権記号ですが、間違ったフォントを選択す...

SQL実行ステップの詳細な分析

SQL実行ステップの詳細な分析まず、ステートメントが実行される順序を見てみましょう。 (8)選択する...

ウェブページの色特性の分類

色特性の分類あらゆる色は、赤、緑、青の三原色から構成されます。三原色の中で暖色なのは赤だけなので、作...

Linux インストール MongoDB の起動と一般的な問題の解決

MongoDB のインストール プロセスと問題記録1. MongoDBのインストールMongoDBを...

ウェブページ(ウェブサイト)のデザインと制作に関する考えや経験の共有

まずは投稿する前に! 「I Want to Study on My Own!」に改めて感謝します。た...