2

The effect I'm trying to achieve is the first main picture on this website: http://shop.soot.me/

As far as I can tell, this is being achieved by background, not <img>. Is it possible to achieve this with the <img> tag? I tried my hand in it, but it's not exactly there.

https://jsfiddle.net/jzhang172/e1javm23/

.box{
  width:100%;
  height:500px;
  background:black;
  overflow:hidden;
}
.box img{
max-width:190%;
min-height:100%;

}
<div class="box">
  <img src="http://www.hdwallpapersnew.net/wp-content/uploads/2015/12/landscape-desktop-hd-wallpaper-images.jpg">
</div>
Alexander O'Mara
  • 58,688
  • 18
  • 163
  • 171
Snorlax
  • 4,425
  • 8
  • 37
  • 68
  • 1
    Possible duplicate of [Make image fill div completely without stretching](http://stackoverflow.com/questions/16739908/make-image-fill-div-completely-without-stretching) – Alexander O'Mara Feb 01 '16 at 23:00
  • Alternately: [CSS: filling a div with an image while staying in proportion](http://stackoverflow.com/questions/14142378/css-filling-a-div-with-an-image-while-staying-in-proportion) – Alexander O'Mara Feb 01 '16 at 23:00

1 Answers1

0

Here is a fiddle of code that fills the image to 100% of the width of the box container. https://jsfiddle.net/9pjxeo6o/

Is this what you are looking to do? The website that you referenced actually does use the background property to create the effect that you are talking about. I suspect that this is actually what you are wanting to do, rather than just using an image. This code handles the background cover:

.homepage-hero-video, .homepage-hero-image {
    display: block;
    background-size: cover;
    background-position: center center;
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
}

The background-size: cover; stretches the image to the width of the container automatically.

kyle
  • 2,563
  • 6
  • 22
  • 37
  • Sort of, unfortunately, I'm limited to using image and not background because I'm using a jQuery plugin that takes images unless I find a way to give each slide a background property. The image needs to size accordingly while the container actually stays the same height. – Snorlax Feb 01 '16 at 23:20
  • How is the jquery plugin getting the images? The website you referenced doesn't actually set the background image in the CSS but rather in the style tag of the HTML element. Look at like 474, ```
    ```.
     – kyle Feb 01 '16 at 23:23