CODEWITHSUNDEEP
htmlcss
user827665
user827665

Reputation:

Image is not responsive

I'm still having an issue, I'm not an expert in web programming but i need some help, i have tried everything

here is my code

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

and here is the 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 */
}

and here is the link in where im doing the job, but not working in iOS, mac safari, or chrome or any other browser can any one help me?

Here is Link

Upvotes: 0

Views: 61

Answers (2)

Tyler Roper
Tyler Roper

Reputation: 21672

The code you included here should work:

.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 */
}

However, in the stylesheet attached to your website, this section of code is wrapped in a @media print tag:

@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 */

Styles included in a @media print query will only apply when printing the page. If you'd like this to apply to your page as normal, you'll want to move it out of the @media print {...}.

Upvotes: 2

blecaf
blecaf

Reputation: 1645

You need to give your image a width in percentage. for example. but will advice to use a background image if you want it look look good during screen sizing

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

Upvotes: 0

Related Questions