画像をCSSで切り抜く

Question

私は画像、見出し、説明付きのイベントを表示するイベントリストを持っています。画像はさまざまな人々によってアップロードされるため、さまざまなサイズです。私は、彼らが歪まずに同じサイズで表示するようにしたいので、それらを作物の中心に置くと良いでしょう。

HTML：

<div> 
<div id="homepage-whatson" class="mslwidget whatson"> 
    <div class="msl_eventlist">      
     <div> 

<div class="event_item item1 itemOdd event_item" data-msl-organisation-id="6446"> 
    <dl> 
    <dt><a href="/events/6446/927/"> 
     <span class="msl_event_image"> 
     <img src="/asset/Event/6446/KBS-Mask.jpg?thumbnail_width=200&amp;thumbnail_height=200&amp;resize_type=ResizeFitAll&amp;fill_colour=000000" alt=""> 
     </span> 
     </a> 
     <a href="/events/6446/927/" class="msl_event_name">Kent Business School Masquerade Ball 2016</a> 
    </dt> 
    <dd class="msl_event_time">midnight</dd> 
    <dd class="msl_event_location">Venue</dd> 
    <dd class="msl_event_description">Price</dd> 
    <dd class="msl_event_types"></dd> 
    </dl> 
</div> 

    <div class="event_item item2 itemEven event_item" data-msl-organisation-id="7689"> 
    <dl><dt><a href="/events/7689/1036/"> 
    <span class="msl_event_image"> 
     <img src="/asset/Organisation/7689/12733600.jpg?thumbnail_width=200&amp;thumbnail_height=200&amp;resize_type=ResizeFitAll&amp;fill_colour=000000" alt=""> 
    </span> 
    </a> 

    <a href="/events/7689/1036/" class="msl_event_name">Diversity Fair</a> 
    </dt> 
    <dd class="msl_event_time">16th</dd> 
    <dd class="msl_event_location"></dd> 
    <dd class="msl_event_description">A Language taster session.</dd> 
    </dl> 
    </div> 

</div></div></div></div> 

CSS：

#homepage-whatson { 
    width: 100%; 

    .msl_eventlist { 

     .event_item { 
      width: 31%; 
      display: inline-block; 
      position: relative; 
      vertical-align: top; 
      margin-right: 33px; 
      background: white; 

      dd { 
       padding-left: 25px; 
       padding-right: 25px; 
      } 

      .msl_event_image{ 
       position:relative; 
       width:200px; 
       height:100px; 
       overflow: hidden; 

       img{ 
        position: absolute; 
        left: 50%; 
        top: 50%; 
        height: auto; 
        width: 100%; 
        -webkit-transform: translate(-50%,-50%); 
        -ms-transform: translate(-50%,-50%); 
        transform: translate(-50%,-50%); 
       } 
      } 
     } 

     .event_item:nth-child(3n){ 
      margin-right: 0px; 
     } 
    } 
} 

Answer 1

それより多くのCSSを使用するよりも、サポートされる使用CSSプロパティ変換として、代わりに背景画像を使用したクロップ画像へのより良い

例：https://codepen.io/jacobgoh101/pen/AXYXqL

Htmlの

<div style="background-image: url(https://unsplash.it/1280/720/)"></div> 

のCss

div { 
    margin: 0 auto; 
    width: 200px; 
    height: 200px; 
    background-size: cover; 
    background-repeat: no-repeat; 
    background-position: center center; 
} 

Answer 2

<div class="image" style="background-image:url('url')"></div> 



.image{ 
background-size:cover; 
height:100px; 
width:100px; 
display:inline-block; 
} 

div要素と背景画像を使用してみましょうのCSS（実際にはブラウザ）は、アルゴリズムのものを行います。