如何在响应式背景上放置 div答案

【问题标题】：How to fit div on responsive background如何在响应式背景上放置 div
【发布时间】：2016-11-09 00:02:01
【问题描述】：

最近，我正在寻找一种方法来做到这一点：

我有一些包含背景图片的 html。由于background-size: cover; 规则，此图像具有响应性/它在调整大小时缩放。但是在这个 Html 中（使用 position: relative 规则）我有一些 div 应该具有宽度、高度和位置来覆盖其中一台笔记本电脑（在我的图像顶部图像中）

问题是，即使我使用百分比或 vw 或 vh 规则，在调整大小后，此元素将永远无法适合笔记本电脑（在图像屏幕 2 和 3 上）。

所以我的问题是 - 这可能吗？如果是，我可以使用所有可能的技术（javascript、css3）来存档这种效果。此外，div 还应更改尺寸以适合其中一台笔记本电脑。

感谢您的建议。

背景尺寸 100% 100% 会挤压图像。

【问题讨论】：

你是要实现网格布局吗？
不完全是。笔记本电脑是背景图像而不是 html 元素。但是 div 应该定位在“在这个网格上，比如说......”
那你为什么不给那个 div 的背景图片呢？..

标签： javascript html css

【解决方案1】：

您可以尝试将% 用于background-size 属性

示例：

div{
   background-size:100% 100%;
   background-repeat: no-repeat;
}

你也可以试试background-attachment属性

这里是CSS3 background-size属性的详细信息

【讨论】：

我上传了第二张图片 - 你可以看到 patops 对于某些分辨率来说是 suqasher，这看起来很糟糕。这就是为什么我不能使用这个解决方案。
您应该crop 图像以获得完美的视图/缩略图。但我建议使用img 标签来显示图像。不要使用background-image@user3573535
我添加了第二个答案，没有背景图片。你可以像这样尝试。 @user3573535

【解决方案2】：

您可以像这样尝试您的图库（不使用背景图片）

ul{
	list-style: none;
}
ul li{
	display: inline-block;
	width: 200px;
	height: 200px;
	overflow: hidden;
	position: relative;
}
ul li img{
	position: absolute;
	-webkit-transition: all .5s ease;
	-moz-transition: all .5s ease;
	-ms-transition: all .5s ease;
	transition: all .5s ease;
}
ul li img:hover{
	transform: scale(1.5,1.5);
}

<ul>
	<li><img src="https://placeholdit.imgix.net/~text?txtsize=19&txt=200%C3%97200&w=200&h=200" alt="Demo"></li>
	<li><img src="https://placeholdit.imgix.net/~text?txtsize=19&txt=200%C3%97200&w=200&h=200" alt="Demo"></li>
	<li><img src="https://placeholdit.imgix.net/~text?txtsize=19&txt=200%C3%97200&w=200&h=200" alt="Demo"></li>
	<li><img src="https://placeholdit.imgix.net/~text?txtsize=19&txt=200%C3%97200&w=200&h=200" alt="Demo"></li>
	<li><img src="https://placeholdit.imgix.net/~text?txtsize=19&txt=200%C3%97200&w=200&h=200" alt="Demo"></li>
	<li><img src="https://placeholdit.imgix.net/~text?txtsize=19&txt=200%C3%97200&w=200&h=200" alt="Demo"></li>
	<li><img src="https://placeholdit.imgix.net/~text?txtsize=19&txt=200%C3%97200&w=200&h=200" alt="Demo"></li>
	<li><img src="https://placeholdit.imgix.net/~text?txtsize=19&txt=200%C3%97200&w=200&h=200" alt="Demo"></li>
	<li><img src="https://placeholdit.imgix.net/~text?txtsize=19&txt=200%C3%97200&w=200&h=200" alt="Demo"></li>
	<li><img src="https://placeholdit.imgix.net/~text?txtsize=19&txt=200%C3%97200&w=200&h=200" alt="Demo"></li>
	<li><img src="https://placeholdit.imgix.net/~text?txtsize=19&txt=200%C3%97200&w=200&h=200" alt="Demo"></li>
	<li><img src="https://placeholdit.imgix.net/~text?txtsize=19&txt=200%C3%97200&w=200&h=200" alt="Demo"></li>
</ul>

【讨论】：