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

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;}
}

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