html - 根据屏幕大小更改图像的位置

Question

我参与了一个建立响应式网站的元素，遇到了一个我在这里或其他任何地方都找不到答案的问题:

当查看带有文本和图像的特定框时，我希望在使用台式机/平板电脑和较小的屏幕(即智能手机)时图像的位置不同。在桌面/平板电脑上，我希望图像具有固定大小并 float 在文本旁边，但在标题下方，在较小的屏幕上，我希望图像位于标题和文本上方的顶部，并以 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;}
}

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