CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSのトリミングされた画像

CSSで画像を切り抜く方法はいくつかあります。ただし、これらの中で最も単純で最も効果的なものは次のとおりです。

object-fitの使用：

object-fit: coverを使用する場合 、画像を簡単にトリミングしながら、画像のアスペクト比を維持できます。

object-fitを使用できます object-position と一緒に CSSで画像をトリミングします。 object-fitを設定してみてください 画像のプロパティをnone 次に、object-position: 50% 50%を設定します 。これにより、画像がコンテナの中央に配置されます。最初の数字は画像を配置するための左からの距離を指定し、2番目の数字は画像を配置するための上部からの距離を指定します。

背景画像の使用：

<div>を設定します 画像にbackground-image: url(<insert url here>)を含める必要があります 財産。さらに、background-sizeを設定します cover アスペクト比が維持されるようにトリミングします。 background-position デフォルトはtop leftです 。

これを使用する際の唯一の問題は、アクセシビリティの問題です。背景画像は必ずしもスクリーンリーダーで読み取られるとは限らないため、使用する画像がサイトの全体的な目的にとって重要である場合は、ページの画像で何が起こっているかを説明するか、別のオプションを選択します。

幅と高さ、マージン、オーバーフローの使用：

On the container your <img> is in (probably a <div> ある種の）、位置を相対に設定し、オーバーフローを非表示に設定します。相対位置は基本的に画像の周囲にフェンスを配置するため、明確な境界があり、オーバーフロープロパティはそのフェンスを超えるものをすべて非表示にします。

以下のコードエディタで画像を切り抜くさまざまな方法を示しました。

<!DOCTYPE html>
<html>
 <head>
   <title>Parcel Sandbox</title>
   <meta charset="UTF-8" />
   <style>
     h3 {
       text-align: center;
       margin: 20px;
       padding: 20px;
       border-top: 1px solid black;
     }
     div {
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: center;
     }
     div > div {
       max-width: 500px;
       width: 100%;
        align-self: center;
        position: relative;
        overflow: hidden;
     }
     img {
       width: 100%;
     }
      div.crop-top img {
       margin: -20% auto 0;
      }
      
      div.crop-bottom img {
       margin: 0 auto -20%;
      }
      
      div.crop-vertically img {
        margin: -20% auto -20%;
      }
   
 
     div.crop-right img {
        width: 120%;
        margin: 0 -20% 0 0;
     }
     div.crop-left img {
       width: 120%;
       margin: 0 0 0 -20%;
     }
     div.crop-horizontally img {
       width: 180%;
        margin: 0 -20% 0;
        height: 500px;
     }
     div.crop-square img {
        width: 100%;
     }
   </style>
 </head>
 
 <body>
   <div id="app">
     <h3>Normal</h3>
     <div>
       <img
src="https://images.unsplash.com/photo-1505649118510-a5d934d3af17?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80"
       />
     </div>
     <h3>Top Cropped</h3>
     <div class="crop-top">
       <img src="https://images.unsplash.com/photo-1505649118510-a5d934d3af17?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80"
       />
     </div>
     <h3>Bottom Cropped</h3>
     <div class="crop-bottom">
       <img
src="https://images.unsplash.com/photo-1505649118510-a5d934d3af17?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80"
       />
     </div>
     <h3>Bottom and Top Cropped</h3>
     <div class="crop-vertically">
       <img src="https://images.unsplash.com/photo-1505649118510-a5d934d3af17?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80"
       />
     </div>
     <h3>Right Cropped</h3>
     <div class="crop-right">
       <img src="https://images.unsplash.com/photo-1505649118510-a5d934d3af17?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80"
       />
     </div>
     <h3>Left Cropped</h3>
     <div class="crop-left">
       <img src="https://images.unsplash.com/photo-1505649118510-a5d934d3af17?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80"
       />
     </div>
     <h3>Left and Right Cropped</h3>
     <div class="crop-horizontally">
       <img
src="https://images.unsplash.com/photo-1505649118510-a5d934d3af17?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80"
       />
     </div>
     <h3>Square Crop</h3>
     <div class="crop-square">
       <img
src="https://images.unsplash.com/photo-1505649118510-a5d934d3af17?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80"
       />
     </div>
   </div>
 </body>
</html>

HTMLのクラス名属性を確認してから、一致するCSSを確認して、画像の見たい部分を表示するためにマージンがどのように設定されているかを確認してください。

参加者の81％は、ブートキャンプに参加した後、自分たちの技術的な仕事の見通しについてより自信を持っていると述べました。今日のブートキャンプにマッチしましょう。

平均的なブートキャンプの卒業生は、ブートキャンプの開始から最初の仕事を見つけるまで、キャリアの移行に6か月も費やしませんでした。


  1. オブジェクトフィットとオブジェクト位置を使用してCSSで画像を切り抜く

    CSS object-fit およびオブジェクトの位置 プロパティは、画像を切り抜いて、要素での表示方法を指定するのに役立ちます。 CSSobject-fitプロパティの構文は次のとおりです- Selector {    object-fit: /*value*/    object-position:/*value*/ } 例 次の例は、CSSobject-fitプロパティを示しています。 <!DOCTYPE html> <html> <head> <style> img {   &nb

  2. 純粋なCSSによるスムーズなスクロール

    CSSのscroll-behaviorプロパティを使用すると、スクロールの動作を変更できます。 例 次の例は、CSSのscroll-behaviorプロパティを示しています。 <!DOCTYPE html> <html> <head> <style> html {    line-height: 200px;    margin: 30px;    text-align: center;    vertical-align: middle; } #parent {