我有一个事件列表,显示带有图像,标题和描述的事件。图像有各种尺寸,因为它们是由不同的人上传的。我希望它们以相同的尺寸显示而不会歪斜,因此最好将它们放在裁剪中。
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&thumbnail_height=200&resize_type=ResizeFitAll&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&thumbnail_height=200&resize_type=ResizeFitAll&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;
}
}
}
答案 0 :(得分: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;
}
答案 1 :(得分:0)
使用div和背景图片
<div class="image" style="background-image:url('url')"></div>
.image{
background-size:cover;
height:100px;
width:100px;
display:inline-block;
}
让css(实际上是浏览器)做算法的东西。