Make Image Fill Entire Screen Without Bounding Box? - javascript

I am currently using the following code to make images fill the entire screen while keeping their aspect ratio.
div {
position: fixed;
top: 0;
width: 100%;
height: 100%;
}
img {
object-fit: contain;
width: 100%;
height: 100%;
border: thin solid black;
}
<div>
<img src="https://placekitten.com/200/300" alt="">
</div>
What this does is resize images which are smaller or larger than the screen to fill the entire screen while keeping their aspect ratio. For example, when using a display in landscape orientation (width > height) an image with portrait ratio (height > width) would be as high as the screen, while there is some space on the left and right. My example should illustrate this.
In these cases, I would like to be able to detect if the user clicks on the image or outside of it. However, with this approach the bounding box of the image fills the entire div and the entire screen, even if it looks different to the user.
What I mean by this is: The div is set to have 100 percent of the width and height of its container. Since its position is set to fixed, it will have the same size as the screen. For the object-fit property to work on the image, I need to assign it a width and height too. When I set those values to 100 percent, the image's so-called bounding box will fill the entire parent/screen, and then the image will take up as much space as it can inside this box while keeping its aspect ratio (see this answer for another explanation). That means it may look like the image only has the same height, and not the same width as its parent, but in reality, it does. You can verify this using the developer tools of your browser, and I added a border to the image to visualise it. This means, however, that I cannot attach an event listener to the image and one to the div to differentiate between clicks on the image and on the blank area, since the image counts as filling the entire area.
What would be the best approach to solve this? Is there a CSS-only-way? The only thing I can come up with is using JS to size the image, which means making it bigger/smaller to fit the screen while making it keep its aspect ratio, and also doing this on every resize. This seems like a lot of work for something so simple.

Try using flex layout. If you change the height and width of div.outer or the dimensions of the image, it will remain centered in one dimension and fill the div.outer in the other. And only a click on the image itself will raise the alert.
div.outer {
height: 200px;
width: 100px;
border: solid 1px black;
display: flex;
flex-direction: column;
justify-content: center;
}
div.inner {
display: flex;
flex-direction: row;
justify-content: center;
}
div.inner,
img {
max-width: 100%;
max-height: 100%;
}
<div class="outer">
<div class="inner">
<img src="https://placekitten.com/200/300" onclick="alert('click')">
</div>
</div>

In general sense, if image covers the whole screen then we cant target the click on the parent div.
But if u go for the little space all on four corners, then we can provide the click on the parent.
Please refer to the snippet below.
Use the Flex on the div to center the img(image) tag.
I have also provided the maximum width and height so that, the img(image) tag will be in boundary of the parent.
I had even provided you on how to force stretch if needed
* { box-sizing:border-box;}
html,body {height:100%;}
body {margin:0;}
div {
position: fixed;
/*stretching the DIV*/
top: 0;
bottom:0;
right:0;
left: 0;
/*added the background-color for identification*/
background-color: #eadefe;
/*new-props*/
display: flex;
justify-content: center;
align-items: center;
}
img {
max-width: 100%; /** changed width to max-width **/
max-height: 100%; /** changed height to max-height **/
border: thin solid black;
}
/**Below is to force strech and keep image proportions**/
div.force-stretch {
padding: 10px; /*provided padding so image and div can both get clicks*/
}
div.force-stretch img {
object-fit:cover; /*added 10px gap so even if stretched there is space for parent div click*/
width: 100%;
height: 100%;
}
<div>
<img src="https://placekitten.com/200/300" alt="">
</div>

You can use the strange behavior of flex to produce the desired result.
document.querySelector('img').onclick = () => {alert('you pet the kitten.')}
body {
margin: 0;
}
.image-holder {
height: 100vh;
width: 100vw;
display: flex;
justify-content: center;
}
<div class="image-holder">
<img
src="https://images.unsplash.com/photo-1592194996308-7b43878e84a6?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80"
alt="kitten" />
</div>
flex stretches the image's height, if you want to stretch the width use flex-direction: column.

This code solves your problem:
.img-container {
width: 100%;
height: 100vh;
text-align: center;
}
img {
object-fit: contain;
height: 100%;
max-width: 100%;
}
.some-text {
height: 1000px;
}
<div class="some-text"></div>
<div class="img-container">
<img src="https://placekitten.com/500/100" alt="">
</div>
<div class="some-text"></div>
Supposing that you have some elements before and after the image (element .some-text).

You can use the background-size property in CSS to set the size of the background image to fill the entire screen without having a bounding box. You can set the background-size property value to cover to make sure the image covers the entire screen, while maintaining its aspect ratio.
Here's an example:
body {
background-image: url('your-image-url.jpg');
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
This will set the background image to fill the entire screen, without any bounding box or stretching of the image. The background-repeat property is set to no-repeat to prevent the image from repeating and the background-attachment property is set to fixed to keep the image in a fixed position on the screen.

Related

how do i resize my <img> in reactJS so that it fits to the screen?

I am trying to display an image on my application screen.
If I set my display settings (Scale and Layout) to 100%, then I am able to see the complete image on my screen. If it is set to default (150%), then the complete image is not displayed or I will have to scroll my screen to view the image fully.
How can I set the image to a default size so that I can always view the image completely without scrolling?
Code :
JSX file
<div id = "clearDiv" className = "App-header">
<img id="elementId" src= {`data:image/png;base64,${this.state.image}`}/>
</div>
CSS
.App-header {
background-color: #dfe3eb;
min-height: 88vh;
display: flex;
flex-direction: column;
align-items: center;
/* justify-content: center; */
font-size: calc(10px + 2vmin);
color: rgb(1, 19, 1);
}
Thanks in advance.!!
Try object-fit property:
img {
width: 100%;
min-width: 100%;
height: 100%;
object-fit: cover;
}
Is 150% really a default?
Maybe setting width to 100vw
Also, this might help sizing div based on window width

How was this css effect achieved?

I ran into two different website few days back, which was a responsive site but images had different css rules. I'm not sure if only css was used or some javascript. For example in responsive sites, when a window is made small, the images also turns small, so does the text and with different break points size of text can be manipulated.
1) What I saw was on the first website, the height of the image remained the same but the image within it shrunk when the screen was made small. I can compare this to a camera's zoom in and zoom out effect. When the window was made small, the image zoomed out. when the window size was made big, the image zoomed in (all the while height remained the same).
2) On the second website, I noticed that when the screen was made small, the image(100% width) slid to the left of the screen, but the height remained the same.
Two different websites:
Wondering how this was done?
What you are describing is simply images with fluid-height and fixed-height.
In the first example image is set to max-width: 100% and height: auto which resizes according to screen size.
In the second example there is a container div with max-width: 100% and overflow: auto which simple does not allow the image surpass window size and you have an image with fixed height.
Fluid height:
.fluid-height{
max-width: 100%:
height: auto;
width: 100%;
}
<p>Fluid width and height</p>
<img class="fluid-height" src="https://images.unsplash.com/photo-1491308056676-205b7c9a7dc1?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=a4dc6385e23451fd8aa3458688757100&auto=format&fit=crop&w=4506&q=80">
Fixed height:
div{
max-width: 100%;
overflow: hidden;
}
img{
height: 500px;
}
<p>Fixed height</p>
<div>
<img class="fixed-height" src="https://images.unsplash.com/photo-1522206052224-9c5ad951dd74?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=6276d94baf7d9a4b6962be8d9e8aeb4b&auto=format&fit=crop&w=8100&q=80">
</div>
Responsive scaling on websites
Right side image scales with the div that surrounds it.
|container
--|image
|end container
Setting width:50%; on the image makes it take up 50% of the container.
The container scales with the viewPort or window.
The container has display: inline-block; so that other elements can fit next to it.
Example:
red element is the container,
blue represents the window.
Javascript is only there to scale the blue window on button press.
document.addEventListener("DOMContentLoaded", function() {
let counter = 1;
let button = document.getElementById("scale");
let tmpWindow = document.getElementById("pretend");
button.addEventListener("click", function(e) {
counter++;
var nextWidth = parseInt(tmpWindow.style.width) - (10 * counter);
tmpWindow.style.width = nextWidth + "px";
});
});
.test-window {
/*width: 700px;*/
border: 5px solid blue;
}
.container-right {
display: inline-block;
vertical-align: top;
border: 5px solid red;
width: 50%;
height: 100%;
line-height: 0;
}
.container-right img {
width: 100%;
}
.container-left {
display: inline-block;
width: 200px;
border: 5px solid black;
}
<div>
<button id="scale">Shrink window size</button>
</div>
<div id="pretend" class="test-window" style="width:700px;">
<div class="container-right">
<img id="img-right" src="https://lorempixel.com/200/200/" />
</div>
<div class="container-left">
<p>Dante, astray in a wood, reaches the foot of a hill which he begins to ascend; he is hindered by three beasts; he turns back and is met by Virgil, who proposes to guide him into the eternal world. Midway upon the road of our life I found myself within
a dark wood, for the right way had been missed. </p>
</div>
</div>
figured this out:
.somediv {
background-image: url("baloon.jpeg");
background-size: cover;
background-position: center;
}

Make two images same height without hardcoding?

Here I have two images. I have the widths of these two img elements exactly how I want it. The gutter between these two elements and their container is exactly how I want it as well.
After applying vertical-align: top, I noticed that both of these images automatically determine their own height based on the aspect ratio of the source image. As you can see this means the images end up having the same widths (which I defined explicitly) but different heights by a matter of a dozen pixels or so:
I was wondering if there is a way to give both of these images the same height without switching them to be background-image's. Also, if this image feed is 'dynamic' how could I explicitly define the height while not knowing the aspect ratio of the image in question?
So the problem is that if you set the width and height the same on two differently sized images, at least one of them will be distorted.
You could quite easily fix this, as long as the images are relatively similar in size. The idea is, you surround the image with a div and give the div the height and width instead of the image. Then give it the CSS overflow: hidden; and it will crop off the extra bit of the image. You may also need to give it display: inline-block; to get the div's next to each other.
div {
display: inline-block;
height: 200px;
width: 200px;
overflow: hidden;
}
<div>
<img src="http://via.placeholder.com/200x200">
</div>
<div>
<img src="http://via.placeholder.com/200x240">
</div>
Or if you want the image vertically centered:
div {
display: inline-block;
height: 200px;
width: 200px;
overflow: hidden;
position: relative;
}
img {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
<div>
<img src="http://via.placeholder.com/200x200">
</div>
<div>
<img src="http://via.placeholder.com/200x240">
</div>
I recommend using aspect ratios. Format your images to be the same aspect ratio at the minimum before uploading. The other option would be converting to BG images if you can't pre-format.
.container {
padding-top: 100%; /* 1:1 Aspect Ratio */
//padding-top: 75%; /* 4:3 Aspect Ratio */
//padding-top: 66.66%; /* 3:2 Aspect Ratio */
}
I think another approach would be setting image height and use actual image content as background image with background-size:contain; this way your image will not be distorted and will always fill the size.
<img src="blank.gif" style="background-image:url(myImage.jpg);background-repeat:no-repeat;background-position:center center; background-size:contain;height:300px;">
If I were you, I would utilize a CSS method of wrapping your images in a container that has overflow set to hidden which will hide the hanging off pixels.
If you feel people will miss out on part of the image, you could use a css animation like I did below when you hover over it. I use translate3d because it utilizes GPU acceleration in browsers.
main {
display: flex;
justify-content: space-between;
flex-wrap: nowrap;
width: 500px;
}
.img-wrap {
overflow:hidden;
height: 15rem;
width: 15rem;
}
.img-wrap>img {
max-width: 500px;
}
.img-wrap:hover>img {
animation: pan 5s;
}
#keyframes pan {
from {transform:translate3d(0,0,0);}
to {transform:translate3d(-100px,0,0);}
}
<main>
<div class="img-wrap">
<img src="http://lorempixel.com/city/500/600">
</div>
<div class="img-wrap">
<img src="http://lorempixel.com/people/800/700">
</div>
</main>
The easiest way to achieve this would be to set the images as the background of your divs. This will not distort the images as setting the height and width on an img element would. You can then define whether to center it or not.
.img {
width: 200px;
height: 100px;
display: inline-block;
margin-right: 10px;
background-size: cover;
background-position: center;
}
<div class="img" style="background-image: url('https://images.pexels.com/photos/23764/pexels-photo.jpg?w=1260&h=750&auto=compress&cs=tinysrgb');"></div>
<div class="img" style="background-image: url('https://images.pexels.com/photos/23388/pexels-photo.jpg?w=1260&h=750&auto=compress&cs=tinysrgb');">
</div>
I have always had this problem, the only solution I found that solves this problem effectively is
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: cover;
and have the image displayed via backend like php with inline style
<div class="image" style="background-image: url('pathToImage');"></div>

If image height exceeds image width, vertically center image by cropping its top and bottom - possible with only CSS?

Given a scenario where you don't know the height and width of image elements in advance, let's say that in cases where image height is greater than image width, you'd like to vertically center the image by cropping the same amount of pixels form its top and bottom, such that the new image height matches the image width. For example, if an image has a width of 200px, and its height is 250px, crop 25px from its top and from its bottom.
Here's an example setup:
HTML:
<div class = 'cell'>
...
<div class = 'image_container'>
...
<img ...>
</div>
</div>
CSS:
.cell {
display: inline-block;
float: left;
/* width will be changed by use of '#media screen'.
Smaller browser window -> larger width */
width: 31%;
}
.image_container {
position: relative;
float: left;
width: 100%;
}
.image_container > img {
width: 100%;
}
Is it possible to accomplish the aforementioned center/crop operation using only CSS, or is it necessary to use javascript/jquery for this?
You can use the object-fit CSS attribute. It acts a lot like the background-size attribute.
.image_container > img {
object-fit: contain;
}
Note that this doesn't have full browser support as of now (October 2016) so you may want to look into setting the image as a background on a div and using background-position and background-size to deal with this instead of an <img> tag.
.image_container {
height: 300px;
background-color: cornflowerblue;
image-rendering: pixelated;
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAALklEQVQoU2NkgID/UBqdYmSESoJobOA/sgKQKTCFMDaKAuqYAHMs3CqiHInXmwDZGBMDEmk6SQAAAABJRU5ErkJggg==');
background-repeat: no-repeat;
background-position: center center;
background-size: 200px;
}
<div class="image_container"></div>
.cover_image {
height: 400px;
background: url('http://lorempixel.com/g/400/200/') no-repeat scroll center center;
background-size: cover;
}
<div class="cover_image"></div>

Calculate apsect ratio width based on height

I have an inline img that is 1280(w) x 1024(h) and is contained within a div. The divs dimensions are set 100%(w/h) of the viewport with overflow hidden.
I want to use the image as a fullscreen background and require that it fills the viewport completely regardless of dimensions with no borders showing. It must keep its aspect ratio and I would also like the image to be centered at all times. I am aware that to achieve this some of the image will be cropped.
I believe if make the image height match the viewport height and calculate the width based on the images aspect ratio this will work but I am unsure how to do this. Can anyone help?
Many thanks in advance.
Use backstretch http://srobbin.com/jquery-plugins/backstretch/
$("#demo").backstretch("http://urltoimage.jpg");'
set #demo to 100/100% width and height
If you're not 100% glued to using an img tag, you can do the following:
HTML
<div id="background"></div>
CSS
#background {
background: url('path/to/img.jpg');
background-size: cover;
background-position: center center;
width: 100vw;
height: 100vh;
}
Not really an answer to your question but a potential alternative -- have you tried the min-height/min-width CSS properties?
HTML:
<div class="container">
<div class="image-wrapper">
<img src="..." />
</div>
</div>
CSS:
.container {
width: 100vw;
height: 100vh;
background-color: grey;
}
.image-wrapper {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
.image-wrapper img {
position: absolute;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
transform: translateX(-50%) translateY(-50%);
}
Fiddle: https://jsfiddle.net/mkjoyep1/
In the example, .container (your full width/height div), fills the page width vw/wh and the .image-wrapper has its width/height set to 100% which will match the parent's width and height. With overflow: hidden acting as the crop mechanism you can then stretch your image to fill it's container. I've positioned the image in the center with the method explored here.
This appears to work for me on Chrome and Firefox.
*Edited to include html/css

Categories