【问题标题】:CSS and Images Keeping centered while resizingCSS 和图像在调整大小时保持居中
【发布时间】:2014-09-30 19:53:57
【问题描述】:

我在看这个网站。英雄图像在调整 css 大小时(我相信)溢出图像并保持居中。链接如下。我试图检查该网站的具体细节,看看我是否能弄清楚。但不能......任何帮助都会很棒。我想重新创建它,但不知道如何。

谢谢 - 这是一个德国网站。 Css 是双语的 :)

Example of picture

【问题讨论】:

  • 我看不到任何英雄,你是什么意思?

标签: css image resize


【解决方案1】:

您可以在 CSS 中简单地使用 background-size:cover;background-position:center center; 来执行此操作:

div{
  background-image:url(image.png);
  background-size:cover;
  background-position:center center;
}

More on background-size from MDN

cover:这个关键字指定背景图片应该是 缩放到尽可能小,同时确保其尺寸 大于或等于相应尺寸的 背景定位区域。

More on background-position from MDN

background-position CSS 属性设置初始位置, 相对于背景

【讨论】:

  • 所以不需要溢出,这样在调整大小时图像可以像上面的例子一样超出边距?
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2016-12-16
  • 2019-10-05
  • 2018-12-19
  • 1970-01-01
  • 2016-07-10
  • 2015-02-23
相关资源
最近更新 更多