CODEWITHSUNDEEP
htmlcss
Maroš Šeleng
Maroš Šeleng

Reputation: 1640

background-size:cover equivalent

if is there a way how to "imitate" the behavior of background-size:cover; (see http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size&preval=cover) with an <img> tag inside of a <div>. I want to have structure like this:

<div style="width:100%, height=30%">
    <img ng-src="{{data.imageData}}"/>
</div>

Sorry, if I am not very clear about the topic, I don't know, how to put it more clearly.

Upvotes: 0

Views: 173

Answers (4)

Antony SUTHAKAR J
Antony SUTHAKAR J

Reputation: 950

Here is a solution but similar to @Moob.

div{
   width: 100%;
   height: 200px;
   position: relative;
   overflow: hidden;
}
img {
   display: block;
   width: 100%;
   position: absolute;
   top: 0px;
   left: 0px;
   right: 0px;
   bottom: 0px;
}

Working jsfiddle

Upvotes: 0

Aravind Bharathy
Aravind Bharathy

Reputation: 1610

Solution

You can accomplish this with object-fit and object-position property

Set it to cover and top left respectively

img {
  display: block;
  width:inherit;
  height: inherit;
  object-fit: cover;
  object-position: top left;
}

How these work

These CSS3 properties are explained in css-tricks.com as follows

The object-fit property defines how an element responds to the height and width of its content box. It's intended for images, videos and other embeddable media formats in conjunction with the object-position property. Used by itself, object-fit lets us crop an inline image by giving us fine-grained control over how it squishes and stretches inside its box.

For detailed usage, refer link1 and link2

Upvotes: 1

Moob
Moob

Reputation: 16204

You can position the image absolutely within the div. Use min-width and min-height to make it at least as big as its container. Give it negative positioning and center it vertically and horizontally using margin:auto. Finally use overflow:hidden on the div to hide the overflow:

html, body {
    height:100%; min-height:100%;
}
div {
    border:1px solid black;
    width:100%;
    height:30%;
    overflow:hidden;
    position:relative;
}
div img {
    display:block;
    position:absolute;
    margin:auto;
    top:-100%;
    right:-100%;
    bottom:-100%;
    left:-100%;
    min-width:100%;
    min-height:100%;
}
<div>
    <img src="http://lorempixel.com/400/400/" />
</div>

It might be easier to see in this jsFiddle as you can resize the panels to see it working. http://jsfiddle.net/jb40mLq3/

Upvotes: 0

Marcos P&#233;rez Gude
Marcos P&#233;rez Gude

Reputation: 22158

You can use something like this:

$(window).load(function() {    

	var theWindow        = $(window),
	    $bg              = $("#bg"),
	    aspectRatio      = $bg.width() / $bg.height();
	    			    		
	function resizeBg() {
		
		if ( (theWindow.width() / theWindow.height()) < aspectRatio ) {
		    $bg
		    	.removeClass()
		    	.addClass('bgheight');
		} else {
		    $bg
		    	.removeClass()
		    	.addClass('bgwidth');
		}
					
	}
	                   			
	theWindow.resize(resizeBg).trigger("resize");

});
#bg { position: fixed; top: 0; left: 0; }
.bgwidth { width: 100%; }
.bgheight { height: 100%; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

<img src="http://dummyimage.com/600x400/000/fff" id="bg" alt="">

See another alternatives:

https://css-tricks.com/perfect-full-page-background-image/

Upvotes: 0

Related Questions