我知道用CSS修改图像是不可能的,这就是为什么我把裁剪放在引号里的原因。
我想做的是采用矩形图像,并使用CSS使它们看起来像正方形,而不扭曲图像。
我想把这个:
到这个:
我知道用CSS修改图像是不可能的,这就是为什么我把裁剪放在引号里的原因。
我想做的是采用矩形图像,并使用CSS使它们看起来像正方形,而不扭曲图像。
我想把这个:
到这个:
当前回答
查看CSS的纵横比
https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio
.square-image { 宽度:50%; 背景图片:url (https://picsum.photos/id/0/367/267); background-size:封面; 背景位置:中心; 比例:1/1; } < div class = "方形图像“> < / div >
您也可以使用常规的img标签,如下所示
.square-image { 宽度:50%; object-fit:封面;/*需要防止图像拉伸,使用对象位置属性调整可见区域*/ 比例:1/1; } < img src = " https://picsum。照片/ id / 0/367/267”class = "方形图像" / >
其他回答
我有一个类似的问题,不能“妥协”的背景图像。 我想到了这个。
<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'});
希望这能有所帮助!
例子: https://jsfiddle.net/cfbuwxmr/1/
可以使用. testg类中的正方形尺寸的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 { 宽度:307 px; 身高:307 px; 隐藏溢出: } .testimg { margin-left: -76像素 } .test2 { 宽度:307 px; 身高:307 px; background: url(http://i.stack.imgur.com/GA6bB.png } <div class="test"><img src="http://i.stack.imgur.com/GA6bB.png" width="460" height="307" class=" testg " /></div> < div class = " test2 " > < / 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');
}
});
});
现在你可以使用纵横比:
img {
aspect-ratio: 1 / 1;
}
它在现代浏览器中也有广泛的支持: https://caniuse.com/mdn-css_properties_aspect-ratio
假设它们不必出现在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 }
注意,这也可以修改为响应,例如%宽度和高度等。