对于任意的图片,我想从图片中央裁剪一个正方形,并在给定的正方形内显示它。
这个问题与此类似:CSS 显示已调整大小并裁剪的图像,但是我不知道图片的大小,因此无法使用设置边距的方法。
对于任意的图片,我想从图片中央裁剪一个正方形,并在给定的正方形内显示它。
这个问题与此类似:CSS 显示已调整大小并裁剪的图像,但是我不知道图片的大小,因此无法使用设置边距的方法。
.center-cropped {
width: 100px;
height: 100px;
background-position: center center;
background-repeat: no-repeat;
}
<div class="center-cropped"
style="background-image: url('https://via.placeholder.com/200');">
</div>
img
标签示例这个版本保留了img
标签,以便我们不会失去拖动或右键保存图片的能力。感谢Parker Bennett提供的透明度技巧。
.center-cropped {
width: 100px;
height: 100px;
background-position: center center;
background-repeat: no-repeat;
overflow: hidden;
}
/* Set the image to fill its parent and make transparent */
.center-cropped img {
min-height: 100%;
min-width: 100%;
/* IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
/* IE 5-7 */
filter: alpha(opacity=0);
/* modern browsers */
opacity: 0;
}
<div class="center-cropped"
style="background-image: url('https://via.placeholder.com/200');">
<img src="https://via.placeholder.com/200" />
</div>
object-fit
/-position
CSS3 Images specification定义了object-fit
和object-position
属性,它们共同允许更好地控制img
元素中图像内容的缩放和位置。使用它们,可以实现所需的效果:
.center-cropped {
object-fit: none; /* Do not scale the image */
object-position: center; /* Center the image within the element */
height: 100px;
width: 100px;
}
<img class="center-cropped" src="https://via.placeholder.com/200" />
background-size: cover;
属性来自适应地缩小或填充div,同时保持原始宽高比。 - Nickimg
的alt
和title
属性将会对你的SEO产生影响。 - Victor Sergienkoobject-fit: cover;
,这样会更符合语义。 - Ben我正在寻找一个纯CSS的解决方案,使用img
标签(而不是背景图片)。
我在这篇文章中找到了一个绝妙的方法来实现这个目标:使用CSS裁剪缩略图。
.thumbnail {
position: relative;
width: 200px;
height: 200px;
overflow: hidden;
}
.thumbnail img {
position: absolute;
left: 50%;
top: 50%;
height: 100%;
width: auto;
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
.thumbnail img.portrait {
width: 100%;
height: auto;
}
这与@Nathan Redblur的答案类似,但它还允许使用肖像图像。
对我来说非常好用。您需要了解有关图像的唯一事项就是它是肖像还是风景,以设置.portrait
类,因此我不得不使用一些Javascript来完成这个部分。
max-width: none;
添加到.thumbnail img
。 - Slam设置你的图片裁剪尺寸并在CSS中使用这行代码:
object-fit: cover;
img
标签但没有 background-image
的示例这个解决方案保留了 img
标签,因此我们不会失去拖动或右键保存图像的能力,但是没有使用 background-image
,只使用 CSS 进行居中和裁剪。
保持宽高比良好,除非是非常高的图像。(请查看链接)
标记
<div class="center-cropped">
<img src="http://placehold.it/200x150" alt="" />
</div>
CSS
翻译后为:CSS
div.center-cropped {
width: 100px;
height: 100px;
overflow:hidden;
}
div.center-cropped img {
height: 100%;
min-width: 100%;
left: 50%;
position: relative;
transform: translateX(-50%);
}
transform: translateX(-50%)
中使用 left: 50%
? - Oleg Yablokovleft
是与容器相关的位置
translate
是与元素相关的
如果您的容器为100px,而您的图片为20px,则 left
将把图片放置在50px-70px的位置之间。为了解决这个问题,我们使用 translateX(-50%)
来重置图片的大小,然后您的图片将位于40px-60px之间。
例如:如果您的容器为100px,则 left: 50%
表示该容器的中心位置rightMiddle = 容器/2 - 元素/2 - Nathan Redblur我使用@Russ和@Alex的答案创建了一个angularjs指令。
这在2014年及以后可能会很有趣 :P
html
<div ng-app="croppy">
<cropped-image src="http://placehold.it/200x200" width="100" height="100"></cropped-image>
</div>
js
angular.module('croppy', [])
.directive('croppedImage', function () {
return {
restrict: "E",
replace: true,
template: "<div class='center-cropped'></div>",
link: function(scope, element, attrs) {
var width = attrs.width;
var height = attrs.height;
element.css('width', width + "px");
element.css('height', height + "px");
element.css('backgroundPosition', 'center center');
element.css('backgroundRepeat', 'no-repeat');
element.css('backgroundImage', "url('" + attrs.src + "')");
}
}
});
#yourElementId
{
background: url(yourImageLocation.jpg) no-repeat center center;
width: 100px;
height: 100px;
}
请记住,只有当您的DOM元素具有布局(块显示元素,如
width
和height
才能起作用。如果不是(例如span),请在CSS规则中添加display:block;
。如果您无法访问CSS文件,请将样式内联到元素中。
还有另一种方法可以将图像居中裁剪:
.thumbnail{position: relative; overflow: hidden; width: 320px; height: 640px;}
.thumbnail img{
position: absolute; top: -999px; bottom: -999px; left: -999px; right: -999px;
width: auto !important; height: 100% !important; margin: auto;
}
.thumbnail img.vertical{width: 100% !important; height: auto !important;}
jQuery(function($) {
$('img').one('load', function () {
var $img = $(this);
var tempImage1 = new Image();
tempImage1.src = $img.attr('src');
tempImage1.onload = function() {
var ratio = tempImage1.width / tempImage1.height;
if(!isNaN(ratio) && ratio < 1) $img.addClass('vertical');
}
}).each(function () {
if (this.complete) $(this).load();
});
});
如果要像Instagram探索或网格一样使用,请在img标签上使用此代码
aspect-ratio: 1 / 1; //or whatever
object-fit: cover;
请注意,父元素必须具有网格显示
最好的两个世界,一些调整大小和一些裁剪,通过双 flexbox 围绕图像。适用于全屏图像(我将其用于图像轮播)。容器的宽度:100vw 和高度:100vh 是魔法 CSS。
HTML:
<div class="container">
<div class="slide">
<img src="https://someimageurl.jpg"
alt="image" class="image">
</div>
</div>
CSS:
.container {
display: flex;
position: relative;
width: 100vw;
height: 100vh;
margin: 0;
padding: 0;
justify-items: center;
justify-content: center;
}
.slide {
display: flex;
width: 100%;
height: 100%;
max-width: 1600px;
max-height: 1000px;
justify-items: center;
justify-content: center;
margin: auto;
padding: 0;
overflow: hidden;
}
.image {
display: block;
min-width: 100%;
min-height: 100%;
object-fit: cover; /* Cover the image */
object-position: center;
margin: auto;
padding: 0;
}