响应式图像不适用于 safari mac 和 safari iPhone答案

【问题标题】：responsive image not working on safari mac and safari iPhone响应式图像不适用于 safari mac 和 safari iPhone
【发布时间】：2017-04-27 22:20:31
【问题描述】：

我正在创建一个网站，但 safari mac/iphone 的响应式图像无法正常工作这是我的代码

    <head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Language" content="es">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta property="og:locale" content="es">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <title>Reparación iPhone – iPad, iPod | iFixed</title>
    <link href="style.css" rel="stylesheet" type="text/css" media="all" />
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300' rel='stylesheet' type='text/css'>
</head>
<body>
<nav><a href="http://www.ifixed.mx"><img src="LayerMain.png" style="max-width: 100% height: auto" /></a></nav>

这是css

 img {
    max-width: 100% !important;
    height: auto !important;
}

【问题讨论】：

发生了什么？你预计会发生什么？
我只需要图片适合窗口，不能出去，只能在安卓浏览器上做
图片是标题
无法在 Safari 10.1 上重现：jsfiddle.net/85v1pzgm

标签： html ios css iphone safari

【解决方案1】：

对于布局中的大多数“响应式”图像，以下是我建议的设置方法。父级应定义约束。

https://jsfiddle.net/sheriffderek/9dnjvnc4/

<figure class='logo'>
  <img src='http://placehold.it/800x700' alt='example image'>
</figure>

...

figure {
  margin: 0;
  padding: 0; /* reset */
  border: 1px solid blue;
}

figure img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%; /* just in case? not nessesary */
}

.logo { /* specific figure size */
  max-width: 400px;
}

听起来您正在尝试获取全屏图像 - 在这种情况下，您应该在 div 设置上使用 background-image 以全屏或 body 等。https://jsfiddle.net/sheriffderek/v65saLmd/

body {
  background-color: black;
  background-image: url('http://placehold.it/2400x4000');
  background-size: cover;
  background-position: center center;
  border: 2px solid blue;
}

【讨论】：

不是全屏图像，只是标题图像
也不行，Link 我已经完成了你建议我的一切
您没有将正确的样式应用于 img。当我将它们添加到开发人员工具中时，它们会起作用。祝你好运！ :)
我已经完成了您在 jsfiddle 中建议我的所有操作，我不是 Web 开发人员，但仍有问题，还有其他建议吗？