我知道用CSS实际修改图像是不可能的,这就是为什么我将crop用引号引起来。
我想做的是拍摄矩形图像,然后使用CSS使它们显示为正方形,而不会扭曲图像。
我基本上想转这个:
变成这个:
background-position
或带有overflow:hidden
和且具有相对位置的图像的旧包装div,这相当简单。
我知道用CSS实际修改图像是不可能的,这就是为什么我将crop用引号引起来。
我想做的是拍摄矩形图像,然后使用CSS使它们显示为正方形,而不会扭曲图像。
我基本上想转这个:
变成这个:
background-position
或带有overflow:hidden
和且具有相对位置的图像的旧包装div,这相当简单。
Answers:
假设它们不必位于IMG标签中...
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;
}
.thumb1:hover { YOUR HOVER STYLES HERE }
编辑:如果div需要链接到某个地方,只需调整HTML和样式,如下所示:
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;
}
.thumb1 a {
display: block;
width: 250px;
height: 250px;
}
.thumb1 a:hover { YOUR HOVER STYLES HERE }
请注意,这也可以修改为响应式的,例如宽度和高度百分比等。
height: 460px; width: 100%;
,它就像一种魅力
没有包装程序div
或其他无用代码的纯CSS解决方案:
img {
object-fit: cover;
width:230px;
height:230px;
}
overflow:hidden
)。例如:
<div style="width:200px;height:200px;overflow:hidden">
<img src="foo.png" />
</div>
使用background-size:cover- http : //codepen.io/anon/pen/RNyKzB
CSS:
.image-container {
background-image: url('http://i.stack.imgur.com/GA6bB.png');
background-size:cover;
background-repeat:no-repeat;
width:250px;
height:250px;
}
标记:
<div class="image-container"></div>
实际上,我最近遇到了同样的问题,最终得到了一个略有不同的方法(我无法使用背景图片)。它确实需要一点点jQuery来确定图像的方向(不过我确定您可以使用普通的JS)。
如果您对更多的解释感兴趣,我写了一篇关于它的博客文章,但是代码很简单:
HTML:
<ul class="cropped-images">
<li><img src="http://fredparke.com/sites/default/files/cat-portrait.jpg" /></li>
<li><img src="http://fredparke.com/sites/default/files/cat-landscape.jpg" /></li>
</ul>
CSS:
li {
width: 150px; // Or whatever you want.
height: 150px; // Or whatever you want.
overflow: hidden;
margin: 10px;
display: inline-block;
vertical-align: top;
}
li img {
max-width: 100%;
height: auto;
width: auto;
}
li img.landscape {
max-width: none;
max-height: 100%;
}
jQuery的:
$( document ).ready(function() {
$('.cropped-images img').each(function() {
if ($(this).width() > $(this).height()) {
$(this).addClass('landscape');
}
});
});
$(this).load(function(){...
在每个循环内添加,因此jQuery会稍等片刻,直到图像加载并获得实际图像尺寸为止。
如果图像位于具有响应宽度的容器中:
的HTML
<div class="img-container">
<img src="" alt="">
</div>
的CSS
.img-container {
position: relative;
&::after {
content: "";
display: block;
padding-bottom: 100%;
}
img {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
}
}
我遇到了类似的问题,无法与背景图片“妥协”。我想到了这个。
<div class="container">
<img src="http://lorempixel.com/800x600/nature">
</div>
.container {
position: relative;
width: 25%; /* whatever width you want. I was implementing this in a 4 tile grid pattern. I used javascript to set height equal to width */
border: 2px solid #fff; /* just to separate the images */
overflow: hidden; /* "crop" the image */
background: #000; /* incase the image is wider than tall/taller than wide */
}
.container img {
position: absolute;
display: block;
height: 100%; /* all images at least fill the height */
top: 50%; /* top, left, transform trick to vertically and horizontally center image */
left: 50%;
transform: translate3d(-50%,-50%,0);
}
//assuming you're using jQuery
var h = $('.container').outerWidth();
$('.container').css({height: h + 'px'});
希望这可以帮助!
使用CSS:溢出:
.thumb {
width:230px;
height:230px;
overflow:hidden
}
在.testimg类中使用带有正方形尺寸的div并在其中包含图像:
.test {
width: 307px;
height: 307px;
overflow:hidden
}
.testimg {
margin-left: -76px
}
或具有图片背景的方形div。
.test2 {
width: 307px;
height: 307px;
background: url(http://i.stack.imgur.com/GA6bB.png) 50% 50%
}
以下是一些示例:http : //jsfiddle.net/QqCLC/1/
更新了图像中心
.test {
width: 307px;
height: 307px;
overflow: hidden
}
.testimg {
margin-left: -76px
}
.test2 {
width: 307px;
height: 307px;
background: url(http://i.stack.imgur.com/GA6bB.png) 50% 50%
}
<div class="test"><img src="http://i.stack.imgur.com/GA6bB.png" width="460" height="307" class="testimg" /></div>
<div class="test2"></div>
object-fit: cover
会完全满足您的需求。
但它可能在IE / Edge上不起作用。请按照如下所示的方法使用CSS对其进行修复,以使其在所有浏览器上均可工作。
我采取的方法是将图像绝对放置在容器内 ,然后使用组合将其放置在中心位置:
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
一旦它进入中心,我就给图像,
// For vertical blocks (i.e., where height is greater than width)
height: 100%;
width: auto;
// For Horizontal blocks (i.e., where width is greater than height)
height: auto;
width: 100%;
这使图像获得Object-fit:cover的效果。
https://jsfiddle.net/furqan_694/s3xLe1gp/
此逻辑适用于所有浏览器。