如何使图像在不同的屏幕上拉伸答案

【问题标题】：How to make an image stretch in different screens如何使图像在不同的屏幕上拉伸
【发布时间】：2017-10-07 11:09:16
【问题描述】：

我有一个 ID 为 #divider 的分隔线。我使用 Elementor 来编辑我的 wordpress 网站并使用 CSS 修复内容。它在某些屏幕上看起来不错，但我只是在我的笔记本电脑上检查了它，它不会延伸到边缘。它的宽度是 1278 像素。

它似乎还以某种方式推动了另一个文本列。在 elementor 上，它看起来很好。

【问题讨论】：

你能把图片宽度设为 100% 吗？喜欢#divider img {width:100%}
嗨 Ashkar，它不工作。这是一个可以看到分隔线的链接：berko.createak.co.il 我检查了几台笔记本电脑，但它不会伸展。此外，它还导致了将其中一个文本列向左推（带有篮球网背景图像的那个）的另一个问题。我不知道如何解决它。它在 Elementor 插件上看起来很好。我在主要问题上附上了截图/
我看到你给该图像提供了max-width: 100%，而不是width。如果你给它加上width: 100%，它似乎可以修复它

标签： css wordpress elementor

【解决方案1】：

我执行了以下操作，并设法实现了图像的全宽.. 1. 行 -> 扩展部分和内容全宽 2. 图片本身 -> 样式 -> 宽度 -> 设置 VW 为 100。

这就是我所做的一切，它奏效了。

【讨论】：

【解决方案2】：

问题来了

<img width="1400" height="75" src="http://berko.createak.co.il/wp-content/uploads/2017/05/Divider-2.png" class="attachment-full size-full" alt="" srcset="http://berko.createak.co.il/wp-content/uploads/2017/05/Divider-2.png 1400w, http://berko.createak.co.il/wp-content/uploads/2017/05/Divider-2-300x16.png 300w, http://berko.createak.co.il/wp-content/uploads/2017/05/Divider-2-768x41.png 768w, http://berko.createak.co.il/wp-content/uploads/2017/05/Divider-2-1024x55.png 1024w">

您的图像宽度设置为 1400，这将覆盖样式表中的内容。

您可以删除 width="1400" 或者如果不可能，请使用

.elementor-image img {
    width: 100%!important;
}

【讨论】：

谢谢，您能否检查一下我的文本列被推到左侧的问题，正如您在第一篇文章的屏幕截图中看到的那样？我认为这与分隔线有关。

【解决方案3】：

我检查了您的网站，当我通过开发人员工具尝试以下代码时，它似乎运行良好：

.elementor-image img {
    width: 100%;
}

【讨论】：