html - 使用 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;
}