picture size depending on screen size

Asked

Viewed 166 times

2

I have a question on an HTML page I created.

The whole page depending on the large or small screen automatically adjusts the size. Now the only thing I can’t do the same is Image.

I wonder if you can 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" />
html css
  • 1

    I know little of html and css to risk an answer, however I think it remains to indicate height: x%; and width: y%; where x and y are the values in percentage of the space that the image should occupy in the div which contains it. Note that the div must also have its dimensions defined.

1 answer

1

The logic is the same that you should have used with the other elements, using the values in percentage. If you have an image like this:

<img src="image.png" class="image" />

Note that the code you made in CSS will not work because the rule will be applied to the elements img within of elements .image. For the expected result, the inversion of the elements in the rule is necessary, having the rule applied to all elements img containing the class .image.

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: http://jsfiddle.net/rtqh98wn/

  • to only one problem that I can’t understand. When I decrease the Browser adds a space over the image a kind of border or margin

  • Depending on the size of the browser? Or you put a percentage margin (what is well ), or you adventure with the media queries. Media queries are CSS rules that are applied to elements when a certain condition is true, and one of the most commonly used is screen, which is on the device screen.

  • It happens in any browser. Once I shrink the page creates a blank space for me until I start the page. On the page in total it never happens.

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.