Image with 100% width

Navigation
5

I have the following CSS declarations 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 website with top, body and footer. In 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 a technique for leaving the image 100% wide without losing its quality?

    
asked by anonymous 31.01.2014 / 16:56

3 answers

14

An alternative to modern browsers is to set the size of the image that is to be 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 AnyUm +
  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

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

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

Potential problem

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

CSS background-size (100% 100%)

If the goal is that the image be strictly 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 where it is applied.

Example in JSFiddle

Dita: Resizes the result window in JSFiddle to verify that the image is in tune with increasing or decreasing the width of the element.

    
31.01.2014 / 17:47
0

As far as 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 look like this:

HTML: 

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

CSS: 

.largura-cheia{
    width:100%;
    height:560px;
}
    
31.01.2014 / 17:32
0

That depends, do you want it to stay 100% in the browser or the element it's in?

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

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

The image will stay with 100% of the parent element that is 400px.

To get 100% of the browser, in this example above the parent element had to be 100% wide as well. 

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

Do you understand?

    
31.01.2014 / 17:50
What advantages and disadvantages to use? instead of? php? [duplicate] Array count in VUE with conditional