CODEWITHSUNDEEP
htmlcss
user2953989
user2953989

Reputation: 2979

Crop and center an image with css

I have a event list which displays events with an image, header and description. The images are a variety of sizes because they are uploaded by various people. I want them to display at the same size without being skewed, so it would be good to center them in the crop.

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;
        }
    }
}

Upvotes: 0

Views: 83

Answers (2)

Jacob Goh
Jacob Goh

Reputation: 20845

It much better to crop image using background image instead, as the CSS properties used will be much more supported than using CSS transform

Example: 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;
}

Upvotes: 1

Jonas Wilms
Jonas Wilms

Reputation: 138257

Use a div and background image

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



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

Let css (in fact the browser) do the algorithm stuff.

Upvotes: 0

Related Questions