CSS のみを使用して画像のサイズ変更とトリミングを行うにはどうすればよいですか?-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

CSS のみを使用して画像のサイズ変更とトリミングを行うにはどうすればよいですか?

DDD

Dec 25, 2024 pm 06:14 PM

How Can I Resize and Crop Images Using Only CSS?

CSS を使用して画像のサイズ変更とトリミングを行う

この記事では、CSS を使用して画像のサイズ変更とトリミングを行う方法を説明します。この手法を使用すると、元の画像のアスペクト比が異なる場合でも、画像を特定の幅と高さで表示できます。

画像のサイズ変更とトリミング

画像のサイズ変更とトリミングを行うには、 img プロパティとbackground-image プロパティを組み合わせて使用できます。 img プロパティを使用すると、アスペクト比を維持しながら画像のサイズを変更できます。背景画像プロパティを使用すると、画像を希望のサイズにトリミングできます。

例

次の例を考えてみましょう。

CSS のみを使用して画像のサイズ変更とトリミングを行うにはどうすればよいですか?

この画像のサイズは 800x600 ピクセルです。 200x100 ピクセルの画像として表示したいと思います。

ステップ 1: サイズを変更する画像

<br><img  src="/static/imghwm/default1.png" data-src="https://i.sstatic.net/wPh0S.jpg" class="lazy" alt="CSS のみを使用して画像のサイズ変更とトリミングを行うにはどうすればよいですか?" ><pre class="brush:php;toolbar:false">  style="max-width:90%">

この手順では、アスペクト比を維持しながら、画像のサイズを 200x150 ピクセルに変更します。 .

ステップ 2: トリミング画像

<br><div><pre class="brush:php;toolbar:false">style="background-image:
       url('https://i.sstatic.net/wPh0S.jpg'); 
width:200px; 
height:100px; 
background-position:center;">

この手順では、サイズ変更された画像が 200x100 ピクセルにトリミングされます。

組み合わせアプローチ

これらのテクニックを両方組み合わせて、目的の結果を達成できます。たとえば、次のコード:

<pre class="brush:php;toolbar:false">.crop {
    width: 200px;
    height: 150px;
    overflow: hidden;
}

.crop img {
    width: 400px;
    height: 300px;
    margin: -75px 0 0 -100px;
}

<div>
<p></p>
<p>このコードは、画像のサイズを 200x150 ピクセルに変更してからトリミングします。 200x100 ピクセルまで。</p>
</div>

以上がCSS のみを使用して画像のサイズ変更とトリミングを行うにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

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

WordPressブロックと要素にボックスシャドウを追加しますMar 09, 2025 pm 12:53 PM

CSS Box-Shadowおよびアウトラインプロパティは、WordPress 6.1でTheme.jsonサポートを獲得しました。実際のテーマでどのように機能するか、そしてこれらのスタイルをWordPressブロックと要素に適用するために必要なオプションのいくつかの例を見てみましょう。

スクリーンリーダーの分解：アクセス可能なフォームとベストプラクティスMar 08, 2025 am 09:45 AM

これは、フォームアクセシビリティについて行った小さなシリーズの3番目の投稿です。 2番目の投稿を逃した場合は、「ユーザーフォーカスの管理：Focus-Visible」をご覧ください。で

Smart Forms Frameworkを使用してJavaScript連絡フォームを作成するMar 07, 2025 am 11:33 AM

このチュートリアルでは、Smart Formsフレームワークを使用して、プロフェッショナルなJavaScriptフォームの作成を示しています（注：使用できなくなりました）。フレームワーク自体は利用できませんが、原則とテクニックは他のフォームビルダーに関連しています。

満足している属性を持つインラインテキストエディターを作成しますMar 02, 2025 am 09:03 AM

インラインテキストエディターの構築は些細なものではありません。このプロセスは、ターゲット要素を編集可能にすることから始まり、その過程で潜在的なSyntaxerrorの例外を処理します。エディターの作成このエディターを構築するには、コンテンツを動的に変更する必要があります

最初のカスタムSvelteトランジションを作成しますMar 15, 2025 am 11:08 AM

Svelte Transition APIは、コンポーネントがカスタムSVELTE遷移を含むドキュメントを入力または離れるときにアニメーション化する方法を提供します。

GraphQLキャッシングの使用Mar 19, 2025 am 09:36 AM

最近GraphQLの作業を開始した場合、またはその長所と短所をレビューした場合、「GraphQLがキャッシュをサポートしていない」または

node.jsとexpressのMulterを使用してファイルアップロードしますMar 02, 2025 am 09:15 AM

このチュートリアルは、node.js、Express、およびMulterを使用してファイルアップロードシステムを構築することをガイドします。単一および複数のファイルのアップロードをカバーし、後で検索するためにMongoDBデータベースに画像を保存することさえ示します。まず、プロジェックをセットアップします

5つの最高のPHPフォームビルダー（および3つの無料スクリプト）を比較するMar 04, 2025 am 10:22 AM

この記事では、Envato Marketで入手可能なPHPフォームのビルダースクリプトを説明し、機能、柔軟性、デザインを比較します。特定のオプションに飛び込む前に、PHPフォームのビルダーが何であるか、そしてそれを使用する理由を理解しましょう。 PHPフォーム

See all articles

ホットAIツール

ホットツール

SAP NetWeaver Server Adapter for Eclipse

Eclipse を SAP NetWeaver アプリケーションサーバーと統合します。

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