Image with 100% width

Asked

Viewed 63,205 times

5

I have the following CSS statements applied to an element:

.minhaClass {
  float:left;
  width:100%;
  height:560px;
  background:url(../imagens/corpo/imagen.jpg) repeat-x top center;
}

This will happen on a top, body and footer site. On the body I want my image to have the characteristics of the sample code.

Problem

On monitors larger than 1200px wide, the image will be repeating the width.

Question

Is there any technique to leave the image at 100% width without losing the quality of it?

html css

  • But you want 100% of the original size? or the element it is contained in?

  • @Israelzebulon This image is inside a div with width:100%;

  • background-image: url("Hands.jpg"); background-repeat: no-repeat; background-position: block; background-size: 100%;

3 answers

16

An alternative to browsers modern is to set the size of the image being applied as the background of an element by making use of the CSS property background-size (English).

Works from the following browser versions:

Safari 3+
Chrome Qualquerum+
IE 9+
Opera 10+
Firefox 3.6+

CSS background-size (cover)

.minhaClass{
  background: url(../imagens/corpo/imagen.jpg) no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

Example in Jsfiddle

Captura de Tela

Note that in the image, we are declaring no-repeat so that it does not recur when the width of the element is greater than the same.

However, when applying the property background-size with the value cover, we are telling the browser that the image is to occupy the whole dimension of the element.

Potential problem

If the image is not scaled by the element itself, it will be cut by the side that disobeys the scale (see the example on the link above).

CSS background-size (100% 100%)

If the goal is for the image to be 100% wide and 100% high, then we can use:

.minhaClass{
  background: url(../imagens/corpo/imagen.jpg) no-repeat center center;
  -webkit-background-size: 100% 100%;
  -moz-background-size: 100% 100%;
  -o-background-size: 100% 100%;
  background-size: 100% 100%;
}

This will force the image to be the same size as the element it is applied to.

Example in Jsfiddle

Captura de Tela

Said: Resize the result window in Jsfiddle to see that the image keeps up with the increase or decrease in the width of the element.

0

From what I understand, your question is how to set the width of an image via CSS so that it is 100% the size of your parent element. A simple way would be like this:

HTML:

<img src="imagem.png" class="largura-cheia">

CSS:

.largura-cheia{
    width:100%;
    height:560px;
}

  • I was able to leave the width of the image 100% with this property: background-size:cover; . Thank you all! And sorry for the question, it got a little complicated to understand :) And congratulations to the site! Infinite note!

  • Thank you, if you have found the answer to your question outside of the answers posted here, you can click the button at the bottom of the page and answer your own question, thus helping other people who might have the same question as yours in the future.

0

That depends, you want it to be 100% in the browser or in the element it is inside?

It will open 100% inside the parent element, for example:

<div style="width: 400px">
  <img src='img/img.jpg' style='width: 100%'>
</div>

The image will stick with 100% of the parent element which is 400px.

To get 100% of the browser, in this example from above the parent element had to be 100% also width.

<div style="width: 100%">
  <img src='img/img.jpg' style='width: 100%'>
</div>

You got it?

Browser other questions tagged html css

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