问题描述:

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.

网友答案:

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.

网友答案:

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.

网友答案:

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.

网友答案:

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>
相关阅读:
Top