html - 在较小的 div 中垂直居中大图像

标签 html css vertical-alignment

我有一个问题让我有点发疯。我有一个包含较大图像(没有固定尺寸)的小 div

我拍摄了这张较大的图片,并将其宽度设置为 100% 以缩小以适合框边界,但我需要图片在 div 内垂直居中显示,而不是自上而下。

是否有一个简单的 CSS 修复程序?我一直在四处寻找,但运气不佳。

Currently:    Intended:
 --------      --------
| div /w |    |overflow|
| image  |     --------    
 --------     | div w/ |
|overflow|    |  image |
| image  |     --------
 --------     |overflow|
               --------

最佳答案

我会试试这个 CSS:

div.container { width: ?px; height: ?px; overflow: hidden; position: relative; }
div.container img { position: absolute; top: (-50% of image height); left: (-50% of image width); }

关于html - 在较小的 div 中垂直居中大图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3638386/

相关文章:

html - 如何更改导航元素内的字体颜色?

javascript - 表数据不使用 ko.js mvc 显示为 html

html - 使用批处理文件在带有 URL 参数的 Web 浏览器中打开 .HTML 文件

html - 如何根据特定行垂直对齐内联 block 元素,忽略其他行?

html - 如何垂直对齐表格单元格内的 div?

html - 将导航中的图片/Unicode 字符与 Flexbox 中的文本对齐 (html/css)

html - 如何在 html/css 中将文本垂直居中放置在图像旁边?

html - 调整背景图像的大小以按高度填充页面,但允许任一侧的元素

html - 仅使用 CSS 创建下拉列表项菜单

javascript - 使用 HTML/CSS/Javascript 绘制基本形状