Css: Stretching Image to 100% Width

CSS: Stretching image to 100% width

Use background-size like the one used below,

body {
  background-image: url(money.jpg) no-repeat;
  background-size: 100%;
}  

Some useful links :

• Scale background image style
• Stretch and Scale a CSS image Background - With CSS only

CSS: stretching background image to 100% width and height of screen?

You need to set the height of html to 100%

body {
    background-image:url("../images/myImage.jpg");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
html {
    height: 100%
}

http://jsfiddle.net/8XUjP/

CSS Image size, how to fill, but not stretch?

You can use the css property object-fit. ("sets how the content of a replaced element, such as an <img> or <video>, should be resized to fit its container.")

.cover {
  object-fit: cover;
  width: 50px;
  height: 100px;
}

<img src="http://i.stack.imgur.com/2OrtT.jpg" class="cover" width="242" height="363" />

css image being stretched to 100% height

Your <img> tag has a width and a height attribute set by Wordpress.

<img width="1000" height="500" ... >

In your CSS you can set an auto height to maintain aspect ratio, according to your 200px width:

.services-icon img {
    height: auto;
}

Keep in mind, that your CSS overwrites your Wordpress settings for this image.

How do I get an image to fit 100% in width without stretching the image?

Use the CSS3 background-size property. Set it to cover. Like so:

background-size: cover;

Note that only IE9 and later supports this property value. IE8 will complain about an unsupported value. Chrome and Firefox supported cover since the past couple of years at least.

How do you stretch an image to fill a div while keeping the image's aspect-ratio?

Update 2019.

You can now use the object-fit css property that accepts the following values: fill | contain | cover | none | scale-down

https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

As an example, you could have a container that holds an image:

<div class="container">
    <img src="" class="container_img" />
</div>

.container {
    height: 50px;
    width: 50%;
}

.container_img {
    height: 100%;
    width: 100%;
    object-fit: cover;
} 

Stretch a background image (SVG) to 100% width and 100% height?

Using background-size: 100%; actually means background-size: 100% auto;. Use both width and height values: background-size: 100% 100%;

Using a width value only, in which case the height defaults to auto.

https://developer.mozilla.org/en-US/docs/Web/CSS/background-size#Syntax

.container {

   background-image:url("https://upload.wikimedia.org/wikipedia/commons/3/34/Red_star.svg");

   background-position:center center;

   background-repeat:no-repeat;

   width:300px;

   height:180px;

   background-color:#eef;

   border-bottom:1px solid #000;

}

#container1 {

  background-size:contain;

}

#container2 {

  background-size:cover;

}

#container3 {

  background-size: 100% 100%;

}

<div id="container1" class="container"></div>

<div id="container2" class="container"></div>

<div id="container3" class="container"></div>

CSS force image resize and keep aspect ratio

img {

  display: block;

  max-width:230px;

  max-height:95px;

  width: auto;

  height: auto;

}

<p>This image is originally 400x400 pixels, but should get resized by the CSS:</p>

<img width="400" height="400" src="http://i.stack.imgur.com/aEEkn.png">