无涯教程网

Css 将未知大小的大图像居中在一个较小的 div 中，并隐藏溢出

发布于11月03日

我想把img放在without javascript和without background-images舱的中心.

下面是一些示例代码

<div> 
    <img src="/happy_cat.png"/> 
</div>

我不知道IMG的大小，应该可以超过父母的宽度
我不知道父div的宽度(100%)
父div具有固定的高度
图像比父图像大，并且父图像有溢出:隐藏
只需要支持现代浏览器

期望的结果.(忽略不透明等，只需注意位置).

在此处输入图像描述

我知道用背景图片可以很容易做到这一点，但这对我来说不是一个 Select .我也可以使用javascript，但这似乎是一种非常繁重的方式来实现这一点.

谢谢!

千斤顶

推荐答案

那么这个呢:

.img {
   position: absolute;
   left: 50%;
   top: 50%;
   -webkit-transform: translateY(-50%) translateX(-50%);
}

这假设父div处于相对位置.我认为如果您想要.img相对定位而不是绝对定位，这是可行的.只需go 掉position: absolute，并将顶部/左侧更改为margin-top和margin-left即可.

您可能希望添加对transform、-moz-transform等浏览器的支持.

Css相关问答推荐

Vue3日期 Select 器：作用域样式不起作用

日期面板未与Angular中的日期控件对齐

SVG文本在移动浏览器上增长并溢出

CSS 内联 Flex 和段落换行

为什么align-content：start应用于单行项目？

在网格中整齐地对齐项目

更改行数时更改 CSS 网格列

为什么同一个 CSS 类连续出现两次

如何在 Angular 中使用 CSS 设置 FontAwesome 图标的大小？

如何测试页面上的文本被删除

使用 CSS 无限期地闪烁两个不同持续时间的文本

如何使多个 div 显示在一行中但仍保留宽度？

如何将页脚保持在屏幕底部

有没有办法让字段集的宽度与它们中的控件一样宽？

CSS - 悬停穿过元素以激活悬停在被覆盖的元素上

如何在 Chrome 的判断器中添加/插入之前或之后的伪元素？

CSS 悬停与 JavaScript 鼠标悬停

@font-face src： local - 如果用户已经拥有本地字体，如何使用它？

bootstrap 关闭响应菜单点击

更改 html 列表中项目符号的 colored颜色？

实用课程推荐

相关教程推荐