I have this html
.picture-image {
height: 100vh;
overflow: hidden;
position: relative;
}
.picture-image > img {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
width: 100%;
height: 100%;
object-fit: contain;
}
<div class="picture">
<div class="picture-image">
<img alt="" src="">
</div>
</div>
This displays a div with height and width matching the screen, and the image is centered in it, adapting to the div size. It is pretty nice on desktop screens but not in mobile where we usually have a portrait orientation, and this solution causes to show a lot of white space above and below the image.
What can I do to reduce the height (not the width) of the div to match the image height?
If you think there's a better way to display a single image on both desktop and mobile I am open to suggestions.
Add to your picture-image:
display: flex;
justify-content: center;
align-items: center;
And on your image:
max-width: 100%;
max-height: 100%;
DEMO
.picture-image {
height: 100vh;
/*overflow: hidden;
position: relative;*/
display: flex;
justify-content: center;
align-items: center;
}
.picture-image > img {
/*position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;*/
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
<div class="picture">
<div class="picture-image">
<img alt="" src="https://dummyimage.com/1600x600/000/fff">
</div>
</div>
Related
I have a very odd use case I'm trying to implement. I want to make an HTML element that will shrink as you scroll down (top edge will behave like position: sticky, and bottom will behave like position: absolute). I'm planning on using this element as a background for a header where I'll have some SVGs to form a landscape that as you scroll down the elements that are further in the background will be obscured by the closer elements (achieved by setting their positions based on percentage values). I can't see any way in CSS to set different positioning methods for different edges of an element.
Any advice on how to achieve this dynamic resizing effect? I'd prefer to use pure HTML and CSS if possible, but if JS is necessary to solve my problem then that's perfectly fine.
Here's my code so far:
HTML:
<header>
<nav> ... </nav>
<div id="hero">
<div class="bg">
<div class="item_1"></div>
<div class="item_2"></div>
<div class="item_3"></div>
</div>
<div id="hero-content">
...
</div>
</div>
</header>
Here, <div class="bg"> is the element I want to apply this behavior to.
Current CSS:
header {
}
#hero {
position: relative;
height: 90vh;
}
#hero .bg {
position: absolute;
bottom: 0;
height: 100%;
width: 100%;
z-index: -999;
}
#hero .bg .item-1 {
width: 100%;
height: 80%;
position: absolute;
bottom: 0;
}
#hero .bg .item-2 {
width: 100%;
height: 350px;
position: absolute;
bottom: 0;
}
#hero .bg .item-3 {
width: 150px;
height: 200px;
position: absolute;
bottom: 220px;
right: 5%;
}
#hero-content {
display: flex;
flex-flow: column nowrap;
justify-content: flex-end;
align-items: flex-start;
position: absolute;
bottom: 0;
left: 0;
margin: 1rem;
width: 70%;
}
I have a single image (a checkmark) on the page and I want to fix its position when the user resizes the browser or go fullscreen.
As you can see here the image is moving around the page when I try to resize the browser:(image is the checkmark)
And when I resize the browser again:
The desired result is to fix the position of the image like that play button in the middle of the page that moves relative to the window.
Here is the CSS of the image:
Note: I need those viewport units for some complicated reason! and the absolute positioning is prefered.
#Image{
position: absolute;
max-width:10%;
height: auto;
opacity: 1;
top: 78vh;
left:26.5vw;
z-index: 1000;
}
<img id="Image" src="https://round-arm-authority.000webhostapp.com/test/Changed.png"/>
Update: using this seems to work fine but the image resizes Non-proportional:
#correctImage{
position: absolute;
transform: scale(0.2, 0.2);
height: 100vh;
width: 100vw;
opacity: 1;
z-index: 1000;
}
Update 2: Here is the link to download the zip files to test the code in the browser (Chrome is preferred). The HTML code to modify is in story_html5.html lines 22 - 27 and the CSS code is in correctImageStyle.css.
The desired behavior is just resizing and repositioning of the checkmark image like the play button in the center of the page.
http://s6.picofile.com/d/8381556034/1ef7bc07-eea8-4e9e-8bd8-57214a1e7ef8/Untitled1_Storyline_output.zip
Change the max-width: 10%; to width: 10%
#Image{
position: absolute;
width:10%;
height: auto;
opacity: 1;
top: 78vh;
left:26.5vw;
z-index: 1000;
}
<img id="Image" src="https://round-arm-authority.000webhostapp.com/test/Changed.png"/>
Maybe you should try to force your image to always be on the middle of the screen with:
#Image{
position: fixed;
top: 50%;
left: 50%;
transform: scale(0.2);
height: 100vh;
width: 100vw;
opacity: 1;
z-index: 1000;
}
<img id="Image" src="https://round-arm-authority.000webhostapp.com/test/Changed.png"/>
This should work
html,body,* {
margin: 0;
padding: 0;
box-sizing: border-box;
overflow: hidden;
}
.container {
position: relative;
display: flex;
justify-content:center;
align-items:center;
width: auto;
height: auto;
}
img.image {
width: 80%;
height: 250px;
display: block;
background: grey;
}
.logo {
height: 64px;
width: 64px;
position: absolute;
}
<div class="container">
<img class="image"/>
<img class="logo absolute" id="Image" src="https://round-arm-authority.000webhostapp.com/test/Changed.png"/>
</div>
With ::after
html,body,* {
margin: 0;
padding: 0;
box-sizing: border-box;
overflow: hidden;
}
img {
width: 80%;
height: 250px;
display: block;
background: grey;
}
.container {
position: relative;
display: flex;
justify-content: center;
align-items:center;
}
.container::after {
content: "";
background-image: url("https://round-arm-authority.000webhostapp.com/test/Changed.png");
background-position: center center;
background-size:contain;
background-repeat: no-repeat;
position: absolute;
height: 64px;
width: 64px;
z-index: 1;
}
<div class="container">
<img class="image"/>
</div>
We have set an image as a background image using the following code below and place text on top of it. Is there a way to display the image as a background without the "cropping" regardless of the height of the content on top of the image?
A pattern that occurs is that as the content grows so does the height of the image. If the solution requires that we get rid of that, then I am okay with that.
Note: images will not always be the same size.
Current results
Desired results
.banner {
position: relative;
display: block;
}
.banner:after {
content: '';
width: 100%;
height: 100%;
position: absolute;
bottom: 0;
left: 0;
}
.banner__image {
width: 100%;
height: 100%;
background-position: center;
background-size: cover;
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
.banner__content {
padding: 200px;
position: relative;
max-width: 900px;
text-shadow: 0 0 20px rgba(0,0,0,.6);
margin: 0 auto;
padding: 0 15px;
z-index: 2;
color: white;
}
<div class="banner">
<div class="banner__image" style="background-image: url('https://media.istockphoto.com/vectors/people-large-group-vector-id519533182')"></div>
<div class="banner__content">
<h1>Compellingly seize high-payoff supply chains</h1>
<h2>Compellingly underwhelm extensive technology rather than low-risk high-yield manufactured products. Phosfluorescently brand just in.</h2>
</div>
</div>
By using a percentage value in padding-bottom value, the percentage is calculated from the width of the element, not from height, as one might think.
Which means
padding-bottom: 42.773%; /* (438 × 100 / 1024) */
... will always have a minimum height allowing it to display the uncropped image (which, in your case has 1024px × 438px).
.min-ratio {
padding-bottom: 42.7%; /* (height × 100 / width) */
background-size: contain;
background-position: bottom center;
background-repeat: no-repeat;
width: 100%;
position: relative;
}
.banner__content {
position: absolute;
background-color: #00000065;
color: white;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 0 3rem;
}
#media(max-width: 600px) {
.banner__content {
position: static;
}
.min-ratio {
background-size: cover;
padding-bottom: 0;
}
}
.banner__content>* {
align-self: stretch;
}
<div class="min-ratio" style="background-image: url(https://media.istockphoto.com/vectors/people-large-group-vector-id519533182)">
<div class="banner__content">
<h1>Compellingly seize high-payoff supply chains</h1>
<h2>Compellingly underwhelm extensive technology rather than low-risk high-yield manufactured products. Phosfluorescently brand just in.</h2>
</div>
</div>
However, you'll need to stop the image from repeating vertically, using background-repeat:no-repeat so that when the div gets too tall (on mobile, for example) it doesn't repeat the image.
The above technique allows you to set a minimal ratio on an element, without having to hard-code width or height values across different #media responsiveness intervals.
Since stack snippets looks down, here's the fiddle: https://jsfiddle.net/websiter/mek0chne/4/
You could use an padding in .banner
.banner {
position: relative;
display: block;
padding : 50px 0;
}
one way to do this if you don't know what's the height of the image is going to be , you can use an image instead of a div with background and set its position to absolute : Fiddle
.banner {
position: relative;
display: block;
}
.banner:after {
content: '';
width: 100%;
height: 100%;
position: absolute;
bottom: 0;
left: 0;
}
.banner__image {
width: 100%;
height: 100%;
background-position: center;
background-size: cover;
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
.banner__content {
padding: 200px;
position: relative;
max-width: 900px;
text-shadow: 0 0 20px rgba(0,0,0,.6);
margin: 0 auto;
padding: 0 15px;
z-index: 2;
color: white;
}
#bg{
position: absolute;
width: 100%;
}
<div class="banner">
<!--
<div class="banner__image" style="background-image: url('https://media.istockphoto.com/vectors/people-large-group-vector-id519533182')"></div>
-->
<img src="https://media.istockphoto.com/vectors/people-large-group-vector-id519533182" id="bg"/>
<div class="banner__content">
<h1>Compellingly seize high-payoff supply chains</h1>
<h2>Compellingly underwhelm extensive technology rather than low-risk high-yield manufactured products. Phosfluorescently brand just in.</h2>
</div>
</div>
You should look at the max and minimum height attributes in css for your class:
.banner
in addition you can also look at the background-repeat css attribute to prevent the image from repeating or alternatively to repeat on both or only on the x or y axis.
I can provide some code if you like but these are very self explanatory, there may be more elegant solutions but this will help you achieve what you're looking for.
Repeat:
https://www.w3schools.com/cssref/pr_background-repeat.asp
Height:
https://www.w3schools.com/cssref/pr_dim_min-height.asp
https://www.w3schools.com/cssref/pr_dim_max-height.asp
Then do not use the image as a background image. Use it as an normal image.
<div class="banner__image">
<img src="url of the image">
</div>
<div class="banner__content">
<!-- Your content here -->
</div>
And for the CSS
.banner__image img{
position:absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 2;
}
.banner__image{
position: absolute;
z-index: 1;
height: 100%;
width: 100%;
}
.banner__content{
z-index: 3;
}
Now this should work
So, I'm trying to build a site that features various different sized images, one at a time, that are centered and size constrained by a parent div, then resized to preserve their ratio.
#grandparent {
display: block;
position: fixed;
width: 70vw;
height: 85vh;
top: 10vh;
left: 15vw;
}
.parent {
position: relative;
display: block;
width: 100%;
height: 70vh;
}
.resizedimage {
max-width: 100%;
max-height: 100%;
display: block;
margin: auto;
}
<div id="grandparent">
<div class="parent">
<img src="1.jpg" class="imageprime">
<div class="description">Words<br>more words</div>
</div>
</div>
I want the description below to stick below the bottom left corner of the image, which it currently does when max-width is the one being constrained, but when max-height is being constrained, it moves past the left of the image. I can't figure out how to keep them in line!
All the methods I've seen revolve around moving a container div to 50% then padding back to -50%, or something like that. But as I depend on the image dictating the width and height dynamically, I don't know how to translate that to a container div, or just to the text below!
It is quite simple: you need a container that will be sized by image in it with position: relative and your description should have position: absolute so it will be positioned against container which, in its turn will be sized by image. Something like this:
#grandparent {
display: block;
position: fixed;
width: 70vw;
height: 85vh;
top: 10vh;
left: 15vw;
}
.parent {
position: relative;
display: block;
width: 100%;
height: 70vh;
}
.image-container {
display: block;
margin: 0 auto;
position: relative;
}
.resizedimage {
max-width: 100%;
max-height: 100%;
}
.description {
position: absolute;
left: 5px;
bottom: 5px;
}
<div id="grandparent">
<div class="parent">
<div class="image-container">
<img src="https://dummyimage.com/300x200/347508/000000.png" class="resizedimage">
<div class="description">Words<br>more words</div>
</div>
</div>
</div>
This question already has answers here:
center image in a div
(3 answers)
Closed 6 years ago.
How can I ensure that the img within the container is centered and scaling correctly from mobile to desktop? Here is a demo on Codepen. Scale to mobile to better understand the problem
HTML
<div class="image-container">
<img src="https://placeimg.com/470/310/people" alt="" />
</div>
CSS
.image-container{
width: 100%;
height: 500px;
max-height: 500px;
background: red;
overflow: hidden;
text-align: center;
position: relative;
display: block;
}
img{
height: auto;
width: 100%;
max-width: 100%;
position: absolute;
top: -50%;
left: 0;
}
I ask this because the image loses it height on mobile and looks incorrect. I sort of what this to work like `background-size: cover. I'd like the image to completely fill the container
You can add margin:0 auto; to align center horizontally. Remove width:100% as this will stretch width of an image unless you want it to. Keep height:auto to adjust with width.
.image-container{
width: 100%;
height: 500px;
max-height: 500px;
background: red;
overflow: hidden;
text-align: center;
position: relative;
display: block;
}
img{
height: auto;
max-width: 100%;
margin:0 auto;
}
<div class="image-container">
<img src="https://placeimg.com/470/310/people" alt="" />
</div>
To center image horizontally and vertically inside div you can set top: 50% and left: 50% and then just add transform: translate(-50%, -50%).
To make image responsive you can use max-width: 100% and by default height is auto.
.image-container {
width: 100%;
height: 500px;
background: red;
overflow: hidden;
position: relative;
}
img {
max-width: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div class="image-container">
<img src="https://placeimg.com/470/310/people" alt="" />
</div>
Other option is to use Flexbox if you don't want to use relative/absolute position but to keep img responsive you can use object-fit: contain with height: 100%
.image-container {
width: 100%;
height: 500px;
background: red;
display: flex;
align-items: center;
justify-content: center;
}
img {
max-width: 100%;
object-fit: contain;
}
<div class="image-container">
<img src="https://placeimg.com/470/310/people" alt="" />
</div>
If you want img to behave like background-size: cover one way to that is to use object-fit: cover with height: 100% and width: 100%
body,
html {
margin: 0;
padding: 0;
}
.image-container {
width: 100%;
height: 500px;
background: red;
display: flex;
align-items: center;
justify-content: center;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
}
<div class="image-container">
<img src="https://placeimg.com/470/310/people" alt="" />
</div>