css height:auto not showing for responsive image

Question

I want create a responsive image in my doc.

<style>
img,.img {
    width: 80%;
    height: auto;
}
</style>

<body>
    <div>
        <img src="img/tools3/2.png" />
    </div>
<body>

Now I try convert img to div:

<body>
        <div>
            <div class="img" style="img/tools3/2.png"></div>
        </div>
<body>

But not showing any images!

If I change height: auto; to height: 100px; it works but it's not responsive else...

Also I add:

box-sizing: border-box;
clear: both;

to .img but not working.

Why are you trying to load the image in a div? If you want to do that, consider using css to make background-image: url(urlPath); But I don't think that will be responsive, the first code is best for responsive pics — JasTonAChair, Dec 31 '15 at 03:10
Consider starting your troubleshooting here: `style="img/tools3/2.png"`, which is invalid code. — Michael Benjamin, Dec 31 '15 at 03:14

score 0 · Answer 1 · answered Dec 31 '15 at 03:20

0

To do responsive images you need to set the max-width property to 100%. Images always have to be an img tag unless you decide to use background-image on a div.

answered Dec 31 '15 at 03:20

Andrew Axton

1,032
7
9

score 0 · Accepted Answer · answered Dec 31 '15 at 03:25

0

You don't need the pic in the div, you can have that in the img tag.

The img tag can be changed on hover using css

.img:hover {
   content:url(NEWPICPATH);
}

See this answer for more details on changing src this way.

answered Dec 31 '15 at 03:25

JasTonAChair

1,948
1
19
31

repzero · Answer 3 · 2015-12-31T03:55:42.963

looking at the below

    <div>
        <div class="img" style="img/tools3/2.png"></div>
    </div>

The image will not show because

you have

style as "img/tools3/2.png"

A div is a container that can hold an image it, it does not have a source property like an image tag that points to a link.

If you want to make the image display like a div you can simply do

img{
    display:block
}

However you can also set a div background to te an image like this

div {
  width:put your width here;
  height: put yout height here;
  background-image:url("url here");
  background-size: cover;
}

here is a

div {
  width:500px;
  height:500px;
  background-image:url("https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTcKiWvJ9_lKvgooA-T8VMt9BBVpex3VI-NVUkNrGhiECN3YkRdqQ");
   background-size: cover;;

<div>

</div>

score 0 · Answer 4 · answered Dec 31 '15 at 03:54

What you have to do is this .... In html ....

<div style="width:50%;height:50%">
        <img style="width:100%; height:100%;"  src="http://www.hdwallpaperscool.com/wp-content/uploads/2013/11/california-beautiful-natyre-hd-wallpapers-widescreen-cool-images.jpg" />
    </div>

you can give any height or width for the div.If you want you can use style in external style sheet. I suggest you to try bootstrap.it is pretty easy.

css height:auto not showing for responsive image

4 Answers4