如何“作物”将矩形图像转换为带有CSS的正方形？ [英] How to "crop" a rectangular image into a square with CSS?

问题描述

我知道这是不可能的实际上与CSS的图像，这就是为什么我把crop在引号。

我想做的是拍摄矩形图像，并使用CSS让它们显示为正方形，而不会扭曲图像。

我基本上想改变这一点：

进入：

解决方案

假设他们不必在IMG标签...

HTML：

$ p> < div class =thumb1>
< / div>


CSS：

  .thumb1 {
 background：url（blah.jpg）50％50％no-repeat; / * 50％50％centers image in div * / 
 width：250px; 
 height：250px; 
} 
 
 .thumb：hover {您的住宿地点} 
  

EDIT：如果div需要链接到某处，只需调整HTML和样式，如下所示：

HTML：

 < div class =thumb1> 
< a href =＃>链接< / a> 
< / div> 
  

CSS：

  .thumb1 {
 background：url（blah.jpg）50％50％no-repeat; / * 50％50％centers image in div * / 
 width：250px; 
 height：250px; 
} 
 
 .thumb a {
 display：block; 
 width：250px; 
 height：250px; 
} 
 
 .thumb a：hover {您的住宿地点} 
  

请注意，这也可以修改为响应式，例如％宽度和高度等。

I know that it is impossible to actually an image with CSS, which is why I put crop in quotes.

What I'd like to do is take rectangular images and use CSS to make them appear square without distorting the image at all.

I'd basically like to turn this:

Into this:

解决方案

Assuming they do not have to be in IMG tags...

HTML:

<div class="thumb1">
</div>

CSS:

.thumb1 { 
background: url(blah.jpg) 50% 50% no-repeat; /* 50% 50% centers image in div */
width: 250px;
height: 250px;
}

.thumb:hover { YOUR HOVER STYLES HERE }

EDIT: If div needs to link somewhere just adjust HTML and Styles like so:

HTML:

<div class="thumb1">
<a href="#">Link</a>
</div>

CSS:

.thumb1 { 
background: url(blah.jpg) 50% 50% no-repeat; /* 50% 50% centers image in div */
width: 250px;
height: 250px;
}

.thumb a {
display: block;
width: 250px;
height: 250px;
}

.thumb a:hover { YOUR HOVER STYLES HERE }

Note this could also be modified to be responsive, for example % widths and heights etc.

这篇关于如何“作物”将矩形图像转换为带有CSS的正方形？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！