Image not becoming responsive

Question

I'm trying to get my logo to become responsive. Here's a fiddle, and the logo there IS responsive, but on my local machine it's not responsive... https://jsfiddle.net/jfzqbshs/

Here's a GIF showing my local machine 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; 
}

Thank you.

We can't troubleshoot code that's already working. You need to give us enough information to duplicate the error you're getting. Otherwise, this can get closed with the *This question was caused by a problem that can no longer be reproduced or a simple typographical error.* close reason. — BSMP, Jul 16 '17 at 14:33
That's the problem... I've copied and pasted everything that's related to the issue. That's all the HTML and CSS related to it. Also if you notice in the fiddle its responsiveness looks weird doesn't it? Maybe it's about the image it self? Cause I've tried another image and it scaled fine. — Marwan AK, Jul 16 '17 at 14:39
But we can't fix a problem we can't see. How can someone tell you what's wrong with the code you've posted if the code doesn't have anything wrong with it? (I don't see any weirdness with the fiddle and that isn't in your question anyway. ) — BSMP, Jul 16 '17 at 14:46

Johannes · Accepted Answer · 2017-07-16T21:27:53.273

Your image is rather small, so it will never reach the 100% width if you use max-width.

You can use something like this:

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

That makes it responsible (25% width), but also limits it so it never gets smaller than 100px width. You could also add a max-width (in pixels) to avoid that it gets bigger than it actually is (which would result in a blurry image at bad quality)

.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 -->

Best solution! Simple plain CSS. – hansTheFranz Jul 16 '17 at 15:29 — hansTheFranz, Jul 16 '17 at 15:29

Wordica · Answer 2 · 2017-07-16T14:57:27.770

0

Do You use bootstrap or other CSS library? Maybe Your img is overwritten somewhere in Your code?. Try this to check:

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

or even:

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

and put in on bottom of CSS file.

edited Jul 16 '17 at 14:57

answered Jul 16 '17 at 14:52

Wordica

2,427
3
31
51

Image not becoming responsive

2 Answers2