Why does object-fit not affect images?

up vote
0
down vote

favorite

I have two images inside a div. I want the two images to fill the entirety of the div which should be the entire height and width of the webpage. The only problem is, when I use the object-fit attribute, the images don't contain within my container at all. It's almost as if I didn't include the attribute at all. Any way I could get some help with this? Thanks.

@charset "utf-8";
/* CSS Document */

body 
	margin: 0;	


.container 
	margin: 0;
	display: block;
	max-height: 100vh;


.image1 
	object-fit: contain;
	z-index: 1;
	
	position: relative;
	top: 0;
	left: 0;


.image2 
	object-fit: contain;
	z-index: 2;
	
	position: absolute;
	top: 0;
	left: 0;

<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>Sylvanas</title>
	<link href="styles.css" rel="stylesheet" type="text/css">
</head>

<body>
	<div class="container">
		<img class="image1" src="Image_Template_1.png">
		<img class="image2" src="Image_Template_2.png">
		
		
	</div>


	<script src="script.js">
	</script>	
</body>
</html>

edited Nov 9 at 12:50

Farnabaz

3,26811333

asked Nov 9 at 12:42

John Harrison

304

add a comment |

up vote
0
down vote

favorite

@charset "utf-8";
/* CSS Document */

body 
	margin: 0;	


.container 
	margin: 0;
	display: block;
	max-height: 100vh;


.image1 
	object-fit: contain;
	z-index: 1;
	
	position: relative;
	top: 0;
	left: 0;


.image2 
	object-fit: contain;
	z-index: 2;
	
	position: absolute;
	top: 0;
	left: 0;

<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>Sylvanas</title>
	<link href="styles.css" rel="stylesheet" type="text/css">
</head>

<body>
	<div class="container">
		<img class="image1" src="Image_Template_1.png">
		<img class="image2" src="Image_Template_2.png">
		
		
	</div>


	<script src="script.js">
	</script>	
</body>
</html>

edited Nov 9 at 12:50

Farnabaz

3,26811333

asked Nov 9 at 12:42

John Harrison

304

add a comment |

up vote
0
down vote

favorite

@charset "utf-8";
/* CSS Document */

body 
	margin: 0;	


.container 
	margin: 0;
	display: block;
	max-height: 100vh;


.image1 
	object-fit: contain;
	z-index: 1;
	
	position: relative;
	top: 0;
	left: 0;


.image2 
	object-fit: contain;
	z-index: 2;
	
	position: absolute;
	top: 0;
	left: 0;

<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>Sylvanas</title>
	<link href="styles.css" rel="stylesheet" type="text/css">
</head>

<body>
	<div class="container">
		<img class="image1" src="Image_Template_1.png">
		<img class="image2" src="Image_Template_2.png">
		
		
	</div>


	<script src="script.js">
	</script>	
</body>
</html>

edited Nov 9 at 12:50

Farnabaz

3,26811333

asked Nov 9 at 12:42

John Harrison

304

@charset "utf-8";
/* CSS Document */

body 
	margin: 0;	


.container 
	margin: 0;
	display: block;
	max-height: 100vh;


.image1 
	object-fit: contain;
	z-index: 1;
	
	position: relative;
	top: 0;
	left: 0;


.image2 
	object-fit: contain;
	z-index: 2;
	
	position: absolute;
	top: 0;
	left: 0;

<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>Sylvanas</title>
	<link href="styles.css" rel="stylesheet" type="text/css">
</head>

<body>
	<div class="container">
		<img class="image1" src="Image_Template_1.png">
		<img class="image2" src="Image_Template_2.png">
		
		
	</div>


	<script src="script.js">
	</script>	
</body>
</html>

@charset "utf-8";
/* CSS Document */

body 
	margin: 0;	


.container 
	margin: 0;
	display: block;
	max-height: 100vh;


.image1 
	object-fit: contain;
	z-index: 1;
	
	position: relative;
	top: 0;
	left: 0;


.image2 
	object-fit: contain;
	z-index: 2;
	
	position: absolute;
	top: 0;
	left: 0;

<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>Sylvanas</title>
	<link href="styles.css" rel="stylesheet" type="text/css">
</head>

<body>
	<div class="container">
		<img class="image1" src="Image_Template_1.png">
		<img class="image2" src="Image_Template_2.png">
		
		
	</div>


	<script src="script.js">
	</script>	
</body>
</html>

@charset "utf-8";
/* CSS Document */

body 
	margin: 0;	


.container 
	margin: 0;
	display: block;
	max-height: 100vh;


.image1 
	object-fit: contain;
	z-index: 1;
	
	position: relative;
	top: 0;
	left: 0;


.image2 
	object-fit: contain;
	z-index: 2;
	
	position: absolute;
	top: 0;
	left: 0;

<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>Sylvanas</title>
	<link href="styles.css" rel="stylesheet" type="text/css">
</head>

<body>
	<div class="container">
		<img class="image1" src="Image_Template_1.png">
		<img class="image2" src="Image_Template_2.png">
		
		
	</div>


	<script src="script.js">
	</script>	
</body>
</html>

html css image

edited Nov 9 at 12:50

Farnabaz

3,26811333

asked Nov 9 at 12:42

John Harrison

304

edited Nov 9 at 12:50

Farnabaz

3,26811333

asked Nov 9 at 12:42

John Harrison

304

edited Nov 9 at 12:50

Farnabaz

3,26811333

edited Nov 9 at 12:50

Farnabaz

3,26811333

edited Nov 9 at 12:50

Farnabaz

3,26811333

asked Nov 9 at 12:42

John Harrison

304

asked Nov 9 at 12:42

John Harrison

304

asked Nov 9 at 12:42

John Harrison

304

add a comment |

2 Answers
2

active

oldest

votes

up vote
0
down vote

You should define width and height for images, object-fit property tries to scale image within its tag size and without proper sizing this property does not work

see: MDN

answered Nov 9 at 12:50

Farnabaz

3,26811333

add a comment |

up vote
0
down vote

Check this type CSS Script Once,
And You define the height and width for image to fit the images in web page

.image1 
 /* The image used */
 background-image: url("Image_Template_1.jpg");

 /* Full height */
 height: 100%; 

 /* Center and scale the image nicely */
 background-position: center;
 background-repeat: no-repeat;
 background-size: cover;

.image2 
 /* The image used */
 background-image: url("Image_Template_2.jpg");

 /* Full height */
 height: 100%; 

 /* Center and scale the image nicely */
 background-position: center;
 background-repeat: no-repeat;
 background-size: cover;

and you define the div class inside the body tag like this

<body>
<div class="image1"></div>
<div class="image2"></div>
<body>

answered Nov 9 at 15:31

Chiru

add a comment |

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);

);

draft saved

draft discarded

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53225925%2fwhy-does-object-fit-not-affect-images%23new-answer', 'question_page');

);

Post as a guest

Name

2 Answers
2

active

oldest

votes

2 Answers
2

active

oldest

votes

up vote
0
down vote

You should define width and height for images, object-fit property tries to scale image within its tag size and without proper sizing this property does not work

see: MDN

answered Nov 9 at 12:50

Farnabaz

3,26811333

add a comment |

up vote
0
down vote

You should define width and height for images, object-fit property tries to scale image within its tag size and without proper sizing this property does not work

see: MDN

answered Nov 9 at 12:50

Farnabaz

3,26811333

add a comment |

up vote
0
down vote

You should define width and height for images, object-fit property tries to scale image within its tag size and without proper sizing this property does not work

see: MDN

answered Nov 9 at 12:50

Farnabaz

3,26811333

You should define width and height for images, object-fit property tries to scale image within its tag size and without proper sizing this property does not work

see: MDN

answered Nov 9 at 12:50

Farnabaz

3,26811333

answered Nov 9 at 12:50

Farnabaz

3,26811333

answered Nov 9 at 12:50

Farnabaz

3,26811333

answered Nov 9 at 12:50

Farnabaz

3,26811333

add a comment |

up vote
0
down vote

Check this type CSS Script Once,
And You define the height and width for image to fit the images in web page

.image1 
 /* The image used */
 background-image: url("Image_Template_1.jpg");

 /* Full height */
 height: 100%; 

 /* Center and scale the image nicely */
 background-position: center;
 background-repeat: no-repeat;
 background-size: cover;

.image2 
 /* The image used */
 background-image: url("Image_Template_2.jpg");

 /* Full height */
 height: 100%; 

 /* Center and scale the image nicely */
 background-position: center;
 background-repeat: no-repeat;
 background-size: cover;

and you define the div class inside the body tag like this

<body>
<div class="image1"></div>
<div class="image2"></div>
<body>

answered Nov 9 at 15:31

Chiru

add a comment |

up vote
0
down vote

Check this type CSS Script Once,
And You define the height and width for image to fit the images in web page

.image1 
 /* The image used */
 background-image: url("Image_Template_1.jpg");

 /* Full height */
 height: 100%; 

 /* Center and scale the image nicely */
 background-position: center;
 background-repeat: no-repeat;
 background-size: cover;

.image2 
 /* The image used */
 background-image: url("Image_Template_2.jpg");

 /* Full height */
 height: 100%; 

 /* Center and scale the image nicely */
 background-position: center;
 background-repeat: no-repeat;
 background-size: cover;

and you define the div class inside the body tag like this

<body>
<div class="image1"></div>
<div class="image2"></div>
<body>

answered Nov 9 at 15:31

Chiru

add a comment |

up vote
0
down vote

Check this type CSS Script Once,
And You define the height and width for image to fit the images in web page

.image1 
 /* The image used */
 background-image: url("Image_Template_1.jpg");

 /* Full height */
 height: 100%; 

 /* Center and scale the image nicely */
 background-position: center;
 background-repeat: no-repeat;
 background-size: cover;

.image2 
 /* The image used */
 background-image: url("Image_Template_2.jpg");

 /* Full height */
 height: 100%; 

 /* Center and scale the image nicely */
 background-position: center;
 background-repeat: no-repeat;
 background-size: cover;

and you define the div class inside the body tag like this

<body>
<div class="image1"></div>
<div class="image2"></div>
<body>

answered Nov 9 at 15:31

Chiru

Check this type CSS Script Once,
And You define the height and width for image to fit the images in web page

.image1 
 /* The image used */
 background-image: url("Image_Template_1.jpg");

 /* Full height */
 height: 100%; 

 /* Center and scale the image nicely */
 background-position: center;
 background-repeat: no-repeat;
 background-size: cover;

.image2 
 /* The image used */
 background-image: url("Image_Template_2.jpg");

 /* Full height */
 height: 100%; 

 /* Center and scale the image nicely */
 background-position: center;
 background-repeat: no-repeat;
 background-size: cover;

and you define the div class inside the body tag like this

<body>
<div class="image1"></div>
<div class="image2"></div>
<body>

answered Nov 9 at 15:31

Chiru

answered Nov 9 at 15:31

Chiru

answered Nov 9 at 15:31

Chiru

answered Nov 9 at 15:31

Chiru

add a comment |

draft saved

draft discarded

draft saved

draft discarded

Post as a guest

Name

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Pfthb