响应式图像调整大小问题答案

【问题标题】：Responsive Image Resize Issue响应式图像调整大小问题
【发布时间】：2019-10-19 18:52:03
【问题描述】：

我在网站上到处查看并尝试了我遇到的所有方法，但仍然无法让此图像响应并正确缩放。无论我输入什么代码，它都保持默认大小。我调整了浏览器的大小并使用了手机模拟器，它的大小保持不变。

HTML

<section class="image">
<div>
<img class="info" src="jewelry-large-info.png">
</div>
</section>

CSS

.image {
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
justify-content: center;
}
.info {
height: auto; 
width: auto; 
max-width: 1500px; 
max-height: 666px;
}

如果有人能提供帮助，我们将不胜感激，我可能只是忽略了一些事情。

【问题讨论】：

您遇到的实际问题是什么？您从未在帖子中提到过，请编辑问题
auto 与百分比不同。此外，在section.image 中确实没有理由额外添加div，在这种情况下也没有理由使用-webkit 前缀。
好的，我已经解决了这个问题，但是图像仍然没有调整大小。

标签： html image css

【解决方案1】：

你需要做的是给图像一个 100% 的宽度和一个自动的高度。这将使其保持成比例并与父级一样宽。

【讨论】：

这是我尝试过的，但由于某种原因，它只会移动到屏幕的左侧并且仍然无法调整大小。
好吧，由于某种原因，我认为这是我的标题中的一些代码的问题，因为我在那里调整了一些东西，现在图像正在缩小。

【解决方案2】：

在 CSS 中，“auto”是默认值。这不会以任何方式修改图像的比例。在您的示例中，您使用 auto 作为宽度和高度。这使图像保持其原始尺寸。您可以在 W3Schools 上阅读更多相关信息。

尝试将宽度和高度值添加到您希望图像的外观。这是您请求的响应式图片的示例。

.image {
  height: 100%;
  width: auto;
}

&lt;img class="image" src="http://www.bultannews.com/files/fa/news/1395/11/16/671335_664.jpg" /&gt;

【讨论】：

【解决方案3】：

另一个可行的选择是尝试使用 Cloudinary 的 JavaScript 库来自动响应图像。

首先，在您的 HTML 页面中包含 Cloudinary JavaScript 库：

<script
src="cloudinary-core-shrinkwrap.js" 
type="text/javascript">
</script>

设置img标签参数

<img 
data-src="http://res.cloudinary.com/demo/image/upload/w_auto,c_scale/ 
smiling_man.jpg"   
class="cld-responsive">

并调用 Cloudinary 响应式方法：

<script type="text/javascript">
var cl = cloudinary.Cloudinary.new({cloud_name: "demo"}); 
// replace 'demo' with your cloud name in the line above 
cl.responsive();
</script>

响应式方法查找页面中所有具有“cld-responsive”类名称的图像，检测页面上图像的可用宽度，然后相应地更新 HTML 图像标签。

看看他们描述这种方法的页面 - http://cloudinary.com/documentation/responsive_images

【讨论】：

【解决方案4】：

使用`em` 测量值

精彩阅读：Why Ems?

这是从我的代码中复制的，问题已解决：

HTML：

<div class="logo" >
  <img id="logo" alt="My Logo" src="logo_file.png"/>
</div>

CSS：

@media only screen and (max-width: 42em) {
  div.logo {
    width: 15em;
    display:block;
    margin:auto;
    padding-top: 0.2em;
  }
  img#logo {
    width: inherit;
    max-width: 100%;
    height: auto;
  }
}

将em 的大小更改为您需要的任何值。

【讨论】：

使用em 测量值

使用`em` 测量值