I have a question on an HTML page that I created.
The entire page depending on the large or small screen it automatically adjusts the size. Now the only thing I can not do is Image.
Can you help me?
CSS:
.image {
border: 0;
display: inline-block;
position: relative;
border-radius: 5px;
}
.image img {
display: block;
border-radius: 1px;
}
HTML:
<img src="images/Logo.png" />
The logic is the same one you should have used with the other elements, using the percent values. If you have an image like this:
<img src="image.png" class="image" />
Notice that the code you've made in CSS will not work, because the rule will be applied to elements img within elements .image . For the expected result, it is necessary to reverse the elements in the rule, with the rule applied to all img elements that contain the .image class.
So we can have an image like this:
<img src="image.png" class="image" />
With the following CSS:
img.image {
width: 50%;
height: 50%;
}
Fiddle: link