使用CSS调整大小和裁剪图像

用户名

我想使用CSS调整大小和裁剪未知尺寸的图像。应调整图像大小/裁剪以完全填充已知尺寸的容器,并尽可能少地剪切图像。

另外,如果图像被裁剪,那么我想确定,例如,应该显示图像的中心,而不是左上方。

我做了一个jsfiddle来说明这个问题:http : //jsfiddle.net/q9jFx/

例如,我可以将图像宽度设置为100%,但是如果图像的宽度大于高度,则无法使用。

.container { width: 180px; height: 160px; overflow: hidden; border:red solid 2px }
.container img { width:100%}

<div class="container">
     <img src="the_src" alt="alt" />
</div>
网络提基

仅使用css可以实现此目的的唯一方法是将CSSbackground属性与background-sizeandbackground-position属性结合使用

查看此字段

这些属性的更多信息:
background-position
background-size

HTML:

<div class="container" style="background-image:url(http://www.recipestap.com/wp-content/plugins/wp-o-matic/cache/af4e1_ap.jpg)"></div>
<div class="container" style="background-image:url(http://3.bp.blogspot.com/-LAfvYIuz6c4/UpQxIe-FlmI/AAAAAAAAAcE/DVeCw1W6Yu4/s320/Eggless+Mini+Apple+Pie.JPG)"></div>

CSS:

.container { 
    width: 180px;
    height: 160px;
    border:red solid 2px;

    /* add following */
    background-size:cover;
    background-position:50% 50%;
}

附加信息

如果<img>由于SEO或其他原因确实需要该标签,则需要JS来应对可能遇到的所有情况。

情况1:图像比宽于容器
使用height:100%;width:auto;然后您将再次需要JS将图像置于容器的中央。

情形2:图像比率是heigher比容器
使用width:100%;height:auto;然后JS或display:table;/display:table-cell到verticaly居中在容器的图像。

我已经在某些项目中使用了此技术,但是与backgroundCSS技术相比,它非常繁琐。

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

调整大小和裁剪图像并保持高宽比NodeJS和gm

来自分类Dev

在HTML5和CSS中调整和裁剪图像

来自分类Dev

裁剪和保留宽高比时适合的CSS / JavaScript图像大小

来自分类Dev

使用CSS调整图像大小

来自分类Dev

如何调整大小然后使用画布裁剪图像

来自分类Dev

使用ImageResizer调整图像大小和裁剪图像

来自分类Dev

C#裁剪并调整大图像的大小

来自分类Dev

使用CSS调整图像的裁剪部分的大小

来自分类Dev

使用CSS Grid调整图像大小

来自分类Dev

PHP调整大小并裁剪居中的顶部图像

来自分类Dev

CSS图像裁剪大小

来自分类Dev

在C#中使用缩放和裁剪来调整图像大小

来自分类Dev

上载多个文件,然后使用图像魔术师裁剪和调整大小

来自分类Dev

使用CSS调整图像大小

来自分类Dev

逆向工程图像裁剪和调整大小

来自分类Dev

使用CSS / Javascript进行自适应图像大小调整/裁剪

来自分类Dev

圆角图像,无需调整大小/裁剪/拉伸

来自分类Dev

使用PHP或CSS调整图像大小?

来自分类Dev

使用CSS调整图像大小

来自分类Dev

如何使用PDFlib精确放置裁剪和调整大小的图像?

来自分类Dev

调整相机拍摄的图像大小而不会裁剪

来自分类Dev

TYPO3图像调整大小和裁剪

来自分类Dev

使用 ImageJ 调整和裁剪图像

来自分类Dev

如何使用 CSS 以固定高度裁剪、调整大小和居中 <img>

来自分类Dev

在 Django Admin 和外部使用 django 中的 celery 调整大小/裁剪图像

来自分类Dev

如何使用 angular 2 和 typescript 裁剪图像、调整裁剪框的大小并将其保存在另一个画布中

来自分类Dev

KonvaJS 裁剪和调整大小

来自分类Dev

使用 php 调整大小或裁剪 base64 图像

来自分类Dev

使用 graphicsmagick 调整大小和裁剪图像

Related 相关文章

热门标签

归档