图片没有响应

-2

我试图让我的标志变得快速响应。这里有一个小提琴，并标识有响应程度，但我的本地机器上它不响应...... https://jsfiddle.net/jfzqbshs/图片没有响应

这里有一个GIF图片，展示我的本地机器 GIF

HTML

<div class="header"> 
    <img id="logo" src="assets/logo.png"> 
</div> <!--/ header -->

CSS

.header{ 
    width:100%; 
    box-sizing: border-box; 
    padding-left: 1%; 
    padding-top:1%; 
    padding-bottom: 1%; 
    border-bottom: 1px solid #474547; 
} 
#logo { 
    display: block; 
    max-width: 100%; 
    height: auto; 
}

谢谢。

来源

2017-07-16 Marwan AK

我们不能排除故障代码那已经在工作了。你需要给我们足够的信息来复制你得到的错误。否则，这可以通过*关闭。这个问题是由于无法再现的问题或简单的印刷错误引起的。*关闭原因。 – BSMP

这就是问题所在......我复制并粘贴了与问题相关的所有内容。这就是与之相关的所有HTML和CSS。另外，如果你注意到小提琴的响应性看起来很奇怪，不是吗？也许它是关于它自我形象的？因为我试过另一张图片，并且缩放比例很好。 –

但我们无法解决我们无法看到的问题。如果代码没有任何问题，别人怎么能告诉你你发布的代码有什么问题？（我没有看到小提琴有什么奇怪之处，反正这也不是你的问题。） – BSMP

您的图片相当小，因此如果您使用max-width，它将永远达不到100％的宽度。

您可以使用这样的事情：

#logo { 
    width: 25%; 
    min-width: 100px; 
    height: auto; 
}

这使得它负责（25％的宽度），但也限制了它，所以它永远不会小于100px的宽度。你还可以添加一个max-width（像素），以避免它（质量差，这将导致图像模糊）变得大于它实际上是

.header { 
 
    width: 100%; 
 
    box-sizing: border-box; 
 
    padding-left: 1%; 
 
    padding-top: 1%; 
 
    padding-bottom: 1%; 
 
    border-bottom: 1px solid #474547; 
 
} 
 

 
#logo { 
 
    width: 25%; 
 
    min-width: 100px; 
 
    height: auto; 
 
}

<div class="header"> 
 
    <img id="logo" src="http://placehold.it/200x60/eb7"> 
 
</div> 
 
<!--/ header -->

来源

2017-07-16 14:59:34 Johannes

最好的解决方案！简单的普通CSS。 – hansTheFranz

您使用引导程序或其他CSS库吗？也许你的img被覆盖在你的代码的某个地方？试试这个检查：

.header img { 
    display: block; 
    max-width: 100%; 
    height: auto; 
}

甚至：

img { 
    display: block; 
    max-width: 100%; 
    height: auto; 
}

，并把在CSS文件的底部。

来源

2017-07-16 14:52:01 Wordica

图片没有响应

回答

相关问题