Question

我正在制作一个网站，但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;
}

Answer 1

对于布局中的大多数“resposive”图像，以下是我建议如何设置它的方法。父母应该定义约束。

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设置上使用背景图像为全屏或身体等。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;
}

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

1 个答案: