'Image Doesn't Resize for HTML5 Responsive Website

I'm trying to combine image with text for the header, but the image doesn't resize with it. Although the image appears too big and doesn't adjust in size as I resize the browser window.

HTML Code:

Company Name

Company Name

CSS:

.image {
    display: inline-block;
    outline: 0;
}
.image img {
    display: block;
    width: 100%;
}
/* Header */
#header {
    text-align: center;
}
#header h1 {
    color: #252122;
    font-weight: 900;
    font-size: 2.5em;
    letter-spacing: -0.035em;
    margin: 0 0 1em 0;
}

I tried the following code:

<h1 id="logo">
    <a>Company Name</a>
</h1>

and added the following to the CSS file:

#logo a {
   position:relative;
   display:block;
   width:[image width];
   height:[image height];
}
csshtmlimageresponsive-design


Solution 1:[1]

The css your using to resize the img:

.image img {
    display: block;
    width: 100%;
}

Isn't actually targeting anything as you don't use the class image in your html.

Just add a global style to all your image to make them responsive.

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

height: auto; will keep the images in proportion and max-width: 100%; will keep the image within its parents width but wont stretch it large then its original width.

Solution 2:[2]

Stackoverflow won't let me comment, so I had to post an answer. You have to add the CSS classes to your HTML tags. I created a Plunker here with a demo. I'm not sure what else you need it to do.

I used your code and just added a class:

<body class="homepage">
<div id="page-wrapper">
    <!-- Header -->
    <div id="header-wrapper">
        <div id="header">
            <!-- Logo -->
             <h1 class="image img"><a href="index.html"><a><img src="http://s24.postimg.org/93e2pe9f9/Data_Center_Watermark.png" alt="Company Logo"> Company Name</a></h1>

Solution 3:[3]

You are combining the h1 tag with the image as below code

<h1><a href="index.html"><a><img src="images/pic01.jpg" alt="Company Logo"> Company Name</a></h1>

so it is better you give the class name to h1 as

<h1 class="h1-image><a href="index.html"><a><img src="images/pic01.jpg" alt="Company Logo"> Company Name</a></h1>

so to make the image resize you just need to call the class and target the img inside that tag as

.h1-image img {
    height: 10 rem;
    width: 10 rem;
}

Here you need to manually define the height and width by looking at the result. So the better practise for responsive is to use rem or %. And for fully responsive use @media only screen and (min-width: screen-size)

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 ngearing
Solution 2 Alexey Subach
Solution 3 Rakesh Shrestha

Related Questions