使用CSS，裁剪.img保持方面没有失真 [英] Using just CSS, crop .img keeping aspect without distortion

问题描述

我有一个放在div里面的图片。 div的宽度为600，高度可变。

我想要我的图片坐在div的顶部。如果我的宽度590的问题是，然后图像太高的设计，它看起来太显性在页面上（因为它的比例大约是4：3等）。

所以我想让图像590通过200.如果我使用...

  .img {
 width：590px; 
 max-height：200px; 
} 
  

...然后图像就像我想要的那样放在div里面。但是，照片本身被压缩并变形到590×200。如何确保图像只是在那个大小内作物，没有扭曲？

我没有访问html所以不能添加一个包装器不幸的是...这将需要通过编辑CSS类.img。

右边，负边距是我可以让这个工作的唯一方法。谢谢Andy。

解决方案

你不能通过编辑css来做到这一点。您需要将图片作为HTML背景图片

 < div class =cover> 
< div style =background-image：url（http://img.youtube.com/vi/6WNyczNYsc0/0.jpg）;class =video-thumbnail>< / div> 
< / div> 
  

并使用 background-size：cover; in css

CSS

  .cover {
 width：590px; 
 height：200px; 
} 
 .video-thumbnail {
 height：100％; 
 background-size：cover; 
 -moz-background-size：cover; 
 -webkit-background-size：cover; 
 background-position：center; 
} 
  

DEMO HERE

在演示中，我将背景位置设置为中心。 p>

I have an image that has been placed inside a div. The div is 600 width and has a variable height.

I want my image to sit at the top of the div. If I make the width 590 the issue is that the image is then too high in terms of design and it looks too dominant on the page (because its ratio is roughly 4:3 etc).

So I want to make the image 590 by 200. If i use...

.img { 
width: 590px;
max-height: 200px;
}

...then the image sits inside the div exactly how I want it. However, the photo itself is squashed and distorted into the 590 by 200. How can I ensure that the image just crops within that size and has no distortion?

I have no access to the html so cant add a wrapper around it either unfortunately... This will need to be done only by editing the CSS class .img.

EDIT - Andy is right, negative margins are the only way I can get this to work. Thank you Andy.

解决方案

You cannot do that simply by editing the css. You need to put the image as background-image in HTML

<div class="cover">
    <div style="background-image: url(http://img.youtube.com/vi/6WNyczNYsc0/0.jpg); " class="video-thumbnail"></div>
</div>

and using background-size: cover; in css

CSS

​.cover {
    width: 590px;
    height: 200px;
}
.video-thumbnail {
    height: 100%;
    background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    background-position: center;
}

DEMO HERE

In the demo I placed the background-position as center.

这篇关于使用CSS，裁剪.img保持方面没有失真的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！