根据屏幕尺寸更改图像的位置

Question

我参与了一个设置响应式网站的项目，遇到了一个我无法在这里或其他任何地方找到答案的问题：

当查看带有文字和图像的特定方框时，我希望在使用桌面/平板电脑和小屏幕（即智能手机）时，图像的位置不同。在桌面/平板电脑上，我希望图像具有固定的大小，并在文本旁边浮动，但在标题下，在较小的屏幕上，我希望图像位于标题和文本的顶部，并填充100％大小的框

事实上，用一些图片展示它可能更容易：

桌面/平板电脑的外观如何

我希望它在小屏幕上看起来如何

使用我已完成的代码在较小的屏幕上显示（不需要的）结果

正如您所看到的，我还没有想出如何做到这一点，结果标题和文字被图像覆盖，并且它不尊重框的边界。这是我尝试过的代码：

桌面/平板电脑的CSS：

div {position: relative;}

div img {
width: 200px;
float: right;
margin-left: 40px;
margin-bottom: 20px;}

较小屏幕的CSS：

div {position: relative;}

div img {
position: absolute;
top: 20px;
width: 100%;
margin-bottom: 20px;}

div的HTML：

<div>
<h2>Sed ut perspiciatis unde omnis iste</h2>
<img src="img/blossom.jpg">
Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.
</div>

一些注意事项：颜色，字体等在全局CSS中声明，但对此问题并不重要。桌面/平板电脑版本工作正常，当屏幕变小并且智能手机版本加载图像时，它不能正常工作。没有图像，小版本工作正常。

但这里最大的问题是：当小屏幕版本加载时，如何使用CSS移动图像以覆盖所有文本，包括标题。图像必须尊重框的宽度和文字。

相信我，到目前为止，我已经尝试了很多不同的方法而没有运气，而且我被卡住了！也许解决方案非常明显和简单，但我无法弄清楚。当然希望有人知道该怎么做......？

Answer 1

如果你给出像素的宽度，那就可以了。如果您想使用它来使其响应，您需要使用媒体查询，例如此处。

@media (min-height: 680px), screen and (orientation: portrait) {
div {position: relative;}

div img {
position: absolute;
top: 20px;
width: 200px;
margin-bottom: 20px;}
}

因为现在您使用的是图像的完整宽度，而不是屏幕。