Question

我还有问题，我不是网络编程的专家，但我需要一些帮助，我已经尝试了一切

这是我的代码

<header class='site-header'>
  <a href='#' class='image-wrapper link'>
    <img src='http://ifixed.mx/es/cotiza/LayerMain.png' alt='example image' />
</header>

这是css

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

.image-wrapper img {
/* you can use this class on any resposive image parent */
display: block; /* remove white space on bottom */
width: 100%;
height: auto;
max-width: 100%; /* just in case? not nessesary */
}

.site-header .link {
display: block; /* your link needs to be block in this case */
}

这里是我正在做这项工作的链接，但是在iOS，mac safari或者Chrome或任何其他浏览器中都无法帮助我吗？

Here is Link

Answer 1

此处包含的代码应该有效：

.image-wrapper img {
    /* you can use this class on any resposive image parent */
    display: block; /* remove white space on bottom */
    width: 100%;
    height: auto;
    max-width: 100%; /* just in case? not nessesary */
}

但是，在stylesheet attached to your website，中，此部分代码包含在@media print标记中：

@media print {

    /*...*/

    .image-wrapper img {
    /* you can use this class on any resposive image parent */
    display: block; /* remove white space on bottom */
    width: 100%;
    height: auto;
    max-width: 100%; /* just in case? not nessesary */
    }

    /*...*/

}


/* The snippet above should be HERE */

@media print查询中包含的样式仅在打印页面时应用。如果您希望这样正常应用于您的网页，则需要将其移至@media print {...}的。

Answer 2

您需要为图片指定宽度百分比。例如。但如果您希望在屏幕尺寸调整期间看起来很好看，那么建议使用背景图像

.site-header .image-wrapper > img {
    max-width: 100%;
}

图像没有响应

2 个答案: