Trying to fit an image inside a Div box that changes dimensions according to screen size. Still new to this.
I need this image to always keep it's proportion and be cropped by the Div box that may be vertical or horizontal. Preferably I want the Image to be centered on the Div box and with a 5px bleed.
Optionally, is it also possible to set a focus point on the image so that point is what is centered when Div box changes size?
Many thanks!
Here's my current code, where to improve so that Image gets cropped by Div?
body {
background: white;
display: flex;
height: 100vh;
}
div {
width: calc(100% - 50px);
height: calc(100% - 50px);
background: #f0e8e6;
overflow: hidden;
margin: auto;
display: flex;
}
#container {
max-width: auto;
overflow: hidden;
}
img {
width: calc(100% - 5px);
/* wrong calc? */
object-fit: contain;
}
<body>
<div>
<img src="https://euclois.xyz/desert-statue.jpg">
</div>
<style type="text/css">
html,
body {
margin: 0;
height: 100%;
overflow: hidden
}
</style>
</body>
This will work best as a CSS background.
background-size: cover will expand/shrink the image to cover the entire background without distorting the aspect ratio.
The 5px "bleed" is achieved with a combination of padding: 5px, background-clip: content-box, and background-origin: border-box.
The "focal point" can be adjusted with background-position or background-position-x and background-position-y.
body {
background: white;
display: flex;
height: 100vh;
}
div {
width: calc(100% - 50px);
height: calc(100% - 50px);
overflow: hidden;
margin: auto;
display: flex;
padding: 5px;
background-clip: content-box;
background-color: #f0e8e6;
background-image: url("https://euclois.xyz/desert-statue.jpg");
background-origin: border-box;
background-repeat: no-repeat;
background-position-x: 60%;
background-position-y: 35%;
background-size: cover;
}
#container {
max-width: auto;
overflow: hidden;
}
html,
body {
margin: 0;
height: 100%;
overflow: hidden
}
<body>
<div></div>
</body>
I think using object-fit: cover on the img tag will do instead of contain. Is this what you wanted to do: https://codesandbox.io/s/object-fit-issue-0n63py
use object-fit: cover; for the img class, you have used contain.
See here all possible values for object-fit https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit
add object-fit: cover on the image and also, instead of -5 width on the image, try padding on the wrapping div,
div {
width: calc(100% - 50px);
height: calc(100% - 50px);
background: #f0e8e6;
overflow: hidden;
margin: auto;
display: flex;
padding: 5px;
}
Related
I need to center-align my main div image which I have working on wider screens. But when I reduce the width of the screen, the image always starts from the left and is cropped off at the right.
I need the image to be centered within screen size, even if it is too wide.
body {
background-color: grey;
overflow: hidden;
margin: 0px;
}
.vid {
height: 100vh;
display: block;
margin: auto;
}
<img class="vid" src="http://wizzfree.com/pix/testbg.jpg">
Instead of specifying the height, you should specify the width. Here is an example:
.vid {
width:90%;
display: block;
margin: auto;
}
body {
background-color: grey;
margin:0;
}
.vid {
width: 100vw;
margin-top:10vw;
}
<img class="vid" src="http://wizzfree.com/pix/testbg.jpg">
You may try to apply these styles to the img's parent:
body {
display: flex;
justify-content: center;
align-items: center;
max-width: 100%;
max-height: 100vh;
}
img {
width: 100%;
height: 100%;
}
You can use object-fit lets you specify how the image should fit into the space:
.vid {
object-fit: cover; /* fill the whole container centring image if it doesn't fit */
height: 100vh;
width: 100%; /* object-fit needs to have a width set */
}
Using object-fit:cover will make the image fill (or "cover") the whole space, cropping off the left and right if it is too wide for the space so that it is centred.
Working Example - full cover
body {
background-color: grey;
overflow: hidden;
margin: 0px;
}
.vid {
object-fit:cover;
height: 100vh;
width: 100%;
}
<img class="vid" src="http://wizzfree.com/pix/testbg.jpg">
Working Example Setting a max height & width - you can also set a min/max height or width on the image too if you need to - these can be set to any specific value (e.g. 800px) or % (e.g. max-width:100%):
body {
background-color: grey;
overflow: hidden;
margin: 0px;
}
.vid {
object-fit:cover;
/* e.g. to limit the size of the image to its actual size */
max-width: 100%;
min-height: 500px; /* for example, but not required */
max-height: 100vh;
margin: auto;
display:block;
}
<img class="vid" src="http://wizzfree.com/pix/testbg.jpg">
Its better to use background image when you want to fill a div with a image(most of the time).I hope this this will help you resolve your issue.
body {
overflow: hidden;
margin: 0px;
}
.vid {
height: 100vh;
background-image: url('http://wizzfree.com/pix/testbg.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}
<div class="vid" > </div>
I'm using the following code to show a background image on my page:
#bg-pic {
top: 0px;
left: 0px;
position: fixed;
z-index: -1;
margin: 0px;
width: 100%;
}
#bg-pic > img {
width: 100%;
display: block;
}
<div id="bg-pic">
<img src="https://images.pexels.com/photos/259915/pexels-photo-259915.jpeg" />
</div>
This works fine once the ratio of the browser window is wide enough. But in case I have a very small window I want the picture still to cover the page so instead of width: 100%; height: 100%; would be correct. How can I fix this?
EDIT: Since the provided answer don't solve my actual problem let's describe it using an example:
Let's assume my picture has dimensions 100x100 and my browser window has dimensions 200x100. Then only the upper 100 pixels are filled with the picture. What I want is that the whole browser window is filled by zooming into the picture (of course then the area on the right and on the left of the picture which corresponds to the right 25 and left 25 pixels of the picture is omitted).
Use the background property instead of an img element.
Demo:
body {
background: url('image.jpg') center center / cover;
}
jsfiddle
In your case:
html, body {
min-height: 100%;
}
body {
margin: 0;
background: url('bg.jpg') center center / cover;
}
You could use the object-fit and object-position properties on the image tag.
Codepen example
#bg-pic{
top:0px;
left:0px;
position: fixed;
opacity: 0.18;
z-index: -1;
margin: 0px;
width: 100%;
height:100%;
}
#bg-pic img {
object-fit: cover;
object-position: 50% 50%;
width: 100%;
height: 100%;
}
You can read more about object-fit at CSS-Tricks : https://css-tricks.com/on-object-fit-and-object-position/
You just have to add height:100vh; in your img style tag,
You can't use height:100% because it won't be applied unless you have specified static height to parent div.
Always a better option to go for vh dimension.
#bg-pic {
top: 0px;
left: 0px;
position: fixed;
z-index: -1;
margin: 0px;
width: 100%;
}
<div id="bg-pic">
<img src="https://images.pexels.com/photos/259915/pexels-photo-259915.jpeg" style="width:100%; height:100vh; display: block;"/>
</div>
body { background-image:url("../images/bg.jpg");
background-repeat: no-repeat;
background-size: 100% 100%; }
Try this
You can try flexbox like this:
#bg-pic {
top: 0;
left: 0;
position: fixed;
opacity: 0.5;
z-index: -1;
width: 100%;
height: 100%;
display: flex;
align-items: flex-start;
justify-content: center;
}
img {
min-width: 100%;
min-height: 100%;
flex-shrink: 0;
}
<div id="bg-pic"><img src="https://picsum.photos/800/800?image=1069" style="" /></div>
Try this, its cross browser compatible:
div {
position:relative;
}
img {
max-height: 100%;
max-width: 100%;
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
This assumes you have given a size to the div.
You might be looking for background-size: contain. Paired with height: 100vh should give you desired effect.
If you need the image centered horizontally you can add background-position: 50% 0% or background-position: center; for both horizontal and vertical centering.
#container-with-background {
background: url(https://images.pexels.com/photos/259915/pexels-photo-259915.jpeg);
background-repeat: no-repeat;
background-size: contain;
height: 100vh;
}
<div id="container-with-background">
</div>
If you need your images to be inside your <img> tags you can achieve the same effect with max-width: 100% and max-height: 100% on the <img> tag, and fixed height on the container - height: 500px for example. Setting the height to 100vh will make it fullscreen.
#container {
height: 100vh; /* Can be set to fixed value if needed */
}
img {
display: block;
margin: 0 auto;
max-width: 100%;
max-height: 100%;
}
<div id="container">
<img src="https://images.pexels.com/photos/259915/pexels-photo-259915.jpeg">
</div>
As you can see, I'm trying to make container which a background-image responsive when I minimize my browser's window.
I've tried playing with max-width ,percentages, background-size:cover and a few other tricks but they didn't work or they made my container disappear.
Pug
section
div(class='container')
SASS
section
height: 100vh
width: 100vw
background: gray
.container
position: absolute
background: url('https://www.triplejtours.com.au/wp-content/uploads/2016/02/Lake-Kununurra-reflections-Dylan-Lodge.jpg')
background-repeat: no-repeat
background-position: center
background-size: cover
height: 807px
width: 948px
left: 50%
top: 50%
transform: translate(-50%,-50%)
CodePen
You can try something like this:
body {
margin: 0;
}
.container {
height: 100vh;
width: 100vw;
display: flex; /*use flex to easily center*/
background: gray;
}
.container>div {
background: url('https://www.triplejtours.com.au/wp-content/uploads/2016/02/Lake-Kununurra-reflections-Dylan-Lodge.jpg');
background-repeat: no-repeat;
background-position: center; /*keep it center within the centred div*/
background-size: contain; /*use contain to make the image shrink visually*/
width: 100%;
height: 100%;
margin: auto; /*center the div*/
max-width: 948px; /*Image width*/
max-height: 807px; /*Image height*/
}
<div class="container">
<div></div>
</div>
I have a div which constains an image with diferent srcsets. I have set the div and image width and height to 100% so that the img embrace the whole page, so it is easy to assum that depending on the device screen it will show a bigger or a lower portion of the image when it doesn't fit on the div.
I'm ok with that, but the problem is that I want the image to be showed by the top so that if the height doesn't fit the 100% of the screen height and a part of the img gets cutted it is the bottom of it, but the img starts loading by the bottom and its the top the who gets cutted.
.portada {
width: 100%;
height: 100%;
}
#portadaImg {
height: 100%;
width: 100%;
object-fit: cover;
}
.portadaLetras {
position: absolute;
color: #FFFFFF;
font-size: 2em;
width: 33%;
min-width: 170px;
text-align: center;
background-color: #000000;
}
.centerBoth {
display: flex;
justify-content: center;
align-items: center;
}
<div class="portada centerBoth">
<img id="portadaImg" class="img-fluid" srcset="images/portada/portada-xl.jpg 2400w,
images/portada/portada-l.jpg 1200w,
images/portada/portada-md.jpg 992w,
images/portada/portada-tablet.jpg 768w,
images/portada/portada-mobile.jpg 458w" src="images/portada/portada-mobile.jpg" alt="Foto de portada">
<div class="portadaLetras">
Saint Paolo
<p>MMXIV</p>
</div>
</div>
Any idea what property am I missing?
Add the following property to the .portada class besides the ones I already had:
object-position: center top;
If you don't HAVE to use a srcset, why not use a background image instead of an image tag?
It would simply be:
.portada{
background: #000 url(../path/to/image.jpg) no-repeat;
background-size: cover;
}
Edit
I'm a little confused but if you are still willing to use a background image, perhaps the issue is with your Div styling.
Apply this CSS on the body tag instead...
body{
background: #000 url(../path/to/image.jpg) no-repeat center top;
background-size: cover;
}
You can do this by absolutely positioning your image inside a div with overflow: hidden.
The below image is 225px tall, but its parent div is only 160px tall, so it gets cropped from the bottom, leaving the top of the image alined with the top of its parent div.
.image {
position: relative;
overflow: hidden;
width: 378px;
height: 160px;
}
.image img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: auto;
}
<div class="image">
<img src="https://images.pexels.com/photos/52903/pexels-photo-52903.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=225&w=378" alt="colored pencils">
</div>
A more generic solution that will replicate the effect of background-size: cover; background-position: top center would look something like this:
.image {
position: relative;
overflow: hidden;
width: 378px; /* or whatever */
height: 160px; /* or whatever */
}
.image img {
position: absolute;
top: 0;
left: -100%;
right: -100%;
margin: auto;
width: auto;
height: auto;
min-width: 100%;
min-height: 100%;
}
I have this html:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html><head>
<link href="css/testphoto2.css" rel="stylesheet">
</head>
<body>
<img src="http://placekitten.com/g/200/300" alt="Smiley face" width="420" height="420">
<header class="section" >
</header>
</body>
</html>
and this css:
body {
height: auto;
width: 100%;
background-color: #111;
}
img {
max-width: 100%;
height: auto;
width: auto\;
}
.section {
display: inline-block;
width: 100%;
height: 100%;
padding: 200px 0;
background: url("http://placekitten.com/g/200/300") no-repeat center center scroll;
background-size: cover;
}
I want to have the kitty scale properly as the browser is resized. In the first image, the kitty reaches its native maximum and stays there, regardless of further browser enlargement. The second kitty fills the browser width but only stretches horizontally once the browser exceeds its native width. I would like the kitty to scale in both dimensions as the browser window grows. If I remove the 'padding' property from the css, the kitty disappears.
Change in your CSS for "section" class as:
.section {
display: inline-block;
width: 100%;
height: 300px; /* height should have to provide */
background: url("http://placekitten.com/g/200/300") no-repeat center center scroll;
background-size: cover;
}
Height should have to provide.
make height:100% for HTML, body and section. Remove padding from section
html{
height: 100%;
width: 100%;
}
body {
height: 100%;
width: 100%;
background-color: #111;
}
img {
width: 100%;
height: auto;
width: auto\9; /* ie8 */
}
.section {
display: inline-block;
width: 100%;
height: 100%;
background: url("http://placekitten.com/g/200/300") no-repeat center center scroll;
background-size: cover;
}
check this out
https://jsfiddle.net/160cL4xo/
Set width & height of html & body to 100%. Remove Padding from section.
html,body{
height: 100%;
width: 100%;
}
Working Demo: Fiddler
Unfortunately, none of the solutions worked for getting the background image to scale properly. The kitty gets cropped in some way or another with scaling. The effect I want to achieve is provided by this css:
html, body {
height: auto;
width: 100%;
background-color: #111;
}
img {
max-width: 100%;
width: inherit !important;
height: inherit !important;
}
but I do not know how to achieve it for a background image. Notice how the entire kitty fills the frame proportionately and is never cropped with resizing.
EDIT: This fixes the background image:
.section {
display: inline-table;
padding: 80% 0;
background: url("http://placekitten.com/g/200/300") no-repeat center center ;
background-size: cover;
width: inherit !important;
height: inherit !important;
}
Don't ask me why 80% is needed. But the background kitty now fills the frame and scales just like the html kitty.
https://jsfiddle.net/ox2dy086/
Change in your CSS for "section" class as:
.section {
display: block;
width: 100%;
height: 300px; /* height should have to provide */
background: url("http://placekitten.com/g/200/300") no-repeat center center scroll;
background-size: cover;
}