仅背景大小宽度

Posted 2023-03-06

【中文标题】仅背景大小宽度

【英文标题】：background-size width only

【发布时间】：2014-08-04 12:59:55

【问题描述】：

我在我正在制作的网页上制作了全屏幻灯片放映，但在幻灯片放映“完成”后作为入口页面..我想将图片放在顶部，宽度扩大到全屏分辨率后的宽度尺寸给用户。虽然高度将是静态的..就像 600 像素。

有没有办法做到这一点？用 CSS 什么的？我是 CSS 新手，在谷歌上搜索了很多天后，我没有找到任何像样的例子来说明我正在尝试制作的东西

我没有任何关于我想要归档的示例，但希望有人知道我想要做什么。

提前致谢

【问题讨论】：

这台电脑上只有Paint，抱歉我的箭。 i62.tinypic.com/29y62io.png

您希望图像根据页面宽度进行裁剪或放大吗？

最多可能会被裁剪。我用的是1600x600的图片，所以如果有人有Full-HD的分辨率，那就展开

【参考方案1】：

background-size可以设置两个不同的值：

.yourimg 
      background-image: url('yourimghere.jpg');
      background-size: 100% 600px;

【讨论】：

啊，对，这是有道理的。第一个是宽度，第二个是高度。知道了，我去试试 谢谢你的帮助

没问题。如果需要，您还可以为元素本身设置height。 Here's an example

好的，谢谢。从示例中可以看出，无论我为高度设置什么，“图片”都填满了整个屏幕。但我想我明白了。我试试看

抱歉，忘记更改值了！ This one should work

完美。通过我所做的更改，测试图片看起来不错，谢谢

【参考方案2】：

你可以试试这样的容器

HTML：

<div id="boom">
    plop
</div>

CSS：

#boom 
    width: 100%;
    height: 600px;
    background: url(http://placehold.it/1600x600);

结果： http://jsfiddle.net/fx5jM/

【讨论】：

谢谢 :) 我已经尝试过前面的示例，效果很好。感谢您的帮助，

【参考方案3】：

这对我有用

.backgroundImage
  background-size:contain;
  background-position:top center;
  background-repeat: no-repeat;
  height:600px;