CSSで画像のスタイルを設定する
- 上一页 CSS 工具提示
- 下一页 CSS object-fit
CSSで画像のスタイルを設定する方法を学びます。
角付き画像
を使用して border-radius 属性で円形画像を作成します：
サムネイル画像
を使用して border 属性でサムネイルを作成します。
サムネイル：
例
img {
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
width: 150px;
}
<img src="paris.jpg" alt="Paris">
レスポンシブ画像
レスポンシブ画像は自動的にスクリーンサイズに調整されます。
画像を必要に応じて縮小したいが、元のサイズより大きくすることを避けたい場合は、以下のコードを追加してください：
例
img {
max-width: 100%;
height: auto;
}
ヒント：私たちの CSS RWD 教程 私たちのサイトでレスポンシブWebデザインについてさらに学びましょう。
中央に配置された画像
画像を中央に配置するには、左右のマージンを設定してください： auto それをブロック要素として設定する：
例
img {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
ポラロイド画像 / カード
黄色いチューリップ
赤いチューリップ
例
div.polaroid {
width: 80%;
background-color: white;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
img {width: 100%}
div.container {
text-align: center;
padding: 10px 20px;
}
透明画像
opacity 属性の値の範囲は0.0から1.0です。値が低いほど透明度が高くなります：
opacity 0.2
opacity 0.5
opacity 1（デフォルト）
例
img {
opacity: 0.5;
}
画像フィルタ
CSS filter 属性は視覚効果（ぼかしや鮮度など）を要素に追加します。
注意：Internet ExplorerやEdge 12はfilter属性をサポートしていません。
例
すべての画像の色を白黒（100％グレー）に変更します：
img {
filter: grayscale(100%);
}
ヒント：私たちの CSSフィルタリファレンスマニュアル、CSSフィルタの詳細情報をご覧ください。
画像オーバーレイ
マウスオーバー時のオーバーレイ効果を作成する方法：
レスポンシブ画像ライブラリ
CSSを使用して応答型の画像ライブラリを作成できます。
この例では、メディアクエリを使用して異なるスクリーンサイズの画像を再配置する方法を示します。ブラウザのウィンドウサイズを変更して効果を確認してください：
例
.responsive {}}
padding: 0 6px;
float: left;
width: 24.99999%;
}
@media only screen and (max-width: 700px){
.responsive {}}
width: 49.99999%;
margin: 6px 0;
}
}
@media only screen and (max-width: 500px){
.responsive {}}
width: 100%;
}
}
ヒント：私たちの CSS RWD 教程 中でリソースウェブデザインの知識をさらに学びましょう。
画像モーダル（Image Modal）
これはCSSとJavaScriptがどのように協力して動作するかの例です。
まず、CSSを使用してモーダルウィンドウ（ダイアログ）を作成し、デフォルトで非表示に設定します。
然後、ユーザーが画像をクリックしたときに、JavaScriptを使用してモーダルウィンドウを表示し、モーダル内に画像を表示します：
- 上一页 CSS 工具提示
- 下一页 CSS object-fit
