CSS画像

CSS画像

この章では、CSSを使用して画像をレイアウトする方法を紹介します。

角の丸い画像

サムネイル

我们使用 border 属性来创建缩略图。       
  
缩略图
 
我们使用 border 属性来创建缩略图。
   

レスポンシブ画像

レスポンシブ画像は、さまざまな画面サイズに自動的に適応します。

例では、ブラウザのサイズをリセットすることで効果を確認できます:

     
  
响应式图片
 
响应式图片会自动适配各种尺寸的屏幕。
 
通过重置浏览器大小查看效果:
   

カードスタイルの写真

      
  
响应式卡片
 
  
 
The Troll's tongue in Hardanger, Norway
 
 
 
  
 
Northern Lights in Norway
 
 
  

レスポンシブフォトアルバム

     
  
响应式图片相册
 
 
    
Add a description of the image here
 
 
 
 
    
Add a description of the image here
 
 
 
 
    
Add a description of the image here
 
 
 
 
    
Add a description of the image here
 
 
 
 
 
重置浏览器大小查看效果
 
  

Picture Modal (modal)

この例CSS と JavaScript を組み合わせて画像を一緒にレンダリングする方法を示します。

まず、CSS を使用して、デフォルトでは非表示になっているモーダル ウィンドウ (ダイアログ) を作成します。

次に、JavaScriptを使用してモーダルウィンドウを表示します。画像をクリックすると、ポップアップウィンドウに画像が表示されます

。