This question already has answers here:
Is there an equivalent to background-size: cover and contain for image elements?
(14 answers)
Closed 5 years ago.
EDIT: Trying to reword the question so that the problem is understood correctly
I have a div element within which there is a video element. The div element is resizable. The video element needs to be resizable too but it also needs to keep its original aspect ratio.
.container {
background: #ff9;
height: 150px;
width: 100px;
}
.subcontainer {
background: #9ff;
min-width: 100%;
min-height: 100%;
margin: 5px;
}
.fixedsize{
background: #9f9;
}
<div class="container">
<div class="subcontainer">
<video class="fixedsize" src="https://media.giphy.com/media/3ohryjnGyiSRrGWKn6/giphy-hd.mp4" poster="https://media.giphy.com/media/3ohryjnGyiSRrGWKn6/giphy_s.gif" autoplay="" loop="" playsinline=""></video>
</div>
</div>
So I need, the video element here to be centered both horizontally and vertically without losing the aspect ratio of it.
.container {
background: #ff9;
height: 400px;
width: 1000px;
}
.subcontainer {
background: #9ff;
min-width: 100%;
min-height: 100%;
margin: 5px;
}
.fixedsize {
background: #9f9;
}
<div class="container">
<div class="subcontainer">
<video class="fixedsize" src="https://media.giphy.com/media/3ohryjnGyiSRrGWKn6/giphy-hd.mp4" poster="https://media.giphy.com/media/3ohryjnGyiSRrGWKn6/giphy_s.gif" autoplay="" loop="" playsinline=""></video>
</div>
</div>
In this case, I want the video to stretch vertically and then centered horizontally.
Similar case for where the width of container is greater than the video width; I'd want the video to stretch horizontally and centered vertically.
Is this possible with only css?
max-width and max-height both set to 100% will force the element to stay smaller than its parent. The aligment is the same as one would usually do to center a block element.
.container {
background: #ff9;
height: 150px;
width: 100px;
//overflow: hidden;
}
.subcontainer {
background: #9ff;
min-width: 100%;
min-height: 100%;
margin: 5px;
//overflow: hidden;
position: relative;
}
.fixedsize{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: 100%;
max-height: 100%;
background: #9f9;
}
<div class="container">
<div class="subcontainer">
<video class="fixedsize" src="https://media.giphy.com/media/3ohryjnGyiSRrGWKn6/giphy-hd.mp4" poster="https://media.giphy.com/media/3ohryjnGyiSRrGWKn6/giphy_s.gif" autoplay="" loop="" playsinline=""></video>
</div>
</div>
Related
This question already has answers here:
Image inside div has extra space below the image
(10 answers)
Closed 11 months ago.
The community reviewed whether to reopen this question 11 months ago and left it closed:
Original close reason(s) were not resolved
Run the code snippet below, drag to resize smaller and larger - vertically and horizontally. Note that the image will resize to the smaller of it's natural dimensions or the extrinsic box size, which isn't it's direct <a> parent but the <div> above
This is nearly perfect, but I can't figure out the tiny details, easily identifiable in DevTools by hovering the <a> element (none of the red background should be visible)
I need the anchor to cover the <img>, which is restricted in size by the #extrinsicSize div
I also have issues with working solutions when it comes to Firefox and Safari, my best attempt was using a vertical flex box with justify/align start
div#someParent {
height: 100px;
width: 200px;
resize: both;
overflow: auto;
background: lightgrey;
padding: 5px;
}
div#extrinsicSize {
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
}
a {
background: red;
}
img {
background: lightgreen;
display: inline-block;
max-height: 100%;
max-width: 100%
}
<div id="someParent">
<div id="extrinsicSize">
<a href>
<img src="https://res.cloudinary.com/crunchbase-production/image/upload/c_lpad,h_256,w_256,f_auto,q_auto:eco,dpr_1/v1488264559/cbgqpe9icin2ntbpguyc.png" />
</a>
</div>
</div>
<div>
--------------------- Drag to resize ^
</div>
I fix your css. Please kindly check below if you like or not.
div#someParent {
height: 100px;
width: 200px;
resize: both;
overflow: auto;
background: lightgrey;
padding: 5px;
}
div#extrinsicSize {
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
}
a {
background: red;
display: block;
width: 100%; height: 100%;
}
img {
background: lightgreen;
width: 100%;
height: 100%;
object-fit: cover;
}
<div id="someParent">
<div id="extrinsicSize">
<a href>
<img src="https://res.cloudinary.com/crunchbase-production/image/upload/c_lpad,h_256,w_256,f_auto,q_auto:eco,dpr_1/v1488264559/cbgqpe9icin2ntbpguyc.png" />
</a>
</div>
</div>
<div>
--------------------- Drag to resize ^
</div>
I am trying to overlay an image using a pseudo-element that is aligned to the bottom of a parent element. Then parent then hides part of both the image and the pseudo element using overflow: hidden. This should make the parent clip both the image and the pseudo element at the same place. However the image extends beyond the pseudo element by 1px. This happens in both Chrome and IE at specific breakpoints.
I inserted the code to stackoverflow but I can not reproduce using their code viewer. I can however reproduce on codepen using a screen width of 800px:
https://codepen.io/dwigt/pen/PXyrXq
.wrapper {
margin: auto;
}
.item {
background: lightgrey;
max-height: 500px;
min-height: 500px;
height: 100%;
max-width: 800px;
}
.image {
overflow: hidden;
max-height: 250px;
position: relative;
}
.image img {
max-height: 100%;
width: 100%;
position: relative;
}
.image::after {
z-index: 10;
content: "";
position: absolute;
left: -50%;
top: calc(80%);
width: 200%;
height: 200%;
display: block;
background: lightgrey;
border-radius: 100%;
}
<div class="wrapper">
<div class="item">
<div class="image">
<img src="https://images.unsplash.com/photo-1547039963-8bebea5ff026?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1933&q=80"/>
</div>
<div class="text">
Lorem Ipsum
</div>
</div>
</div>
Is it possible to make an element with position: absolute; have the full height of its parent, including overflowed content?
In the following code snippet the .line element gets cut off when scrolling the .container:
.container {
position: relative;
height: 150px;
width: 300px;
overflow-y: scroll;
}
.line {
position: absolute;
background: #000;
width: 2px;
left: 50%;
height: 100%;
}
<div class="container">
<div class="line"></div>
<div style="height: 500px;"></div>
</div>
Adding another wrapper can solve the issue:
.container {
height: 150px;
width: 300px;
overflow-y: scroll;
}
.container > div {
position: relative;
}
.line {
position: absolute;
background: #000;
width: 2px;
left: 50%;
height: 100%;
}
<div class="container">
<div>
<div class="line"></div>
<div style="height: 500px;"></div>
</div>
</div>
The height: 100%; of the absolutely positioned element refers to the given CSS heigth (i.e. the height defined in the CSS rule) of the relative parent, not to its stretched "real height" when it overflows. So it will always have the initial parent height which is defined via CSS.
To achieve what you want, you'd have to get the parent height via javascript and apply it to the child.
I have two images of different width and height that need to be positioned bottom centered within the image box. Here is the HTML and CSS example.
<div class="box">
<div class='image'>
<img alt="" src="image.jpg"/>
</div>
</div>
.box {
max-width: 970px;
height: 440px;
}
.box img {
max-width: 100%;
position: absolute;
bottom: 8px;
margin-left: auto;
margin-right: auto;
}
This code works fine for a large image of exact width and height. But when a smaller image is placed within image box, that image is centered bottom right. How can I make both images center bottom?
Thanks for anyone's help!
Here you go... I'll try to explain as we go, but short answer, a fiddle
.box {
/* Just so I could see the parent */
background-color: #bada55;
max-width: 970px;
height: 440px;
/* Needed to make this element positional (so it will contain the absolutely positioned child */
position: relative;
/* Yep, center wasn't necessary here... */
}
.box .image { /* move this to the image wrapper */
position: absolute;
bottom: 8px;
/* Force full width */
left: 0;
right: 0;
/* Center contents (the image) */
text-align: center;
}
img {
max-width: 100%;
}
I found this semantic trick to work pretty well (without any absolute positions)
.box {
margin: 0;
text-align: center;
max-width: 970px;
height: 440px;
border:2px solid red;
}
.box .something-semantic {
display: table;
width: 100%;
height: 100%;
}
.box .something-else-semantic {
display: table-cell;
text-align: center;
vertical-align: bottom;
}
html
<div class="box">
<div class="something-semantic">
<div class="something-else-semantic">
<img src="" width="50" height="40"/>
<img src="" width="120" height="70"/>
</div>
</div>
</div>
fiddle here.
I've searched and tried a bunch of different things. I have a variable-height tophalf, and the bottom half should fill up the remaining space. A JSfiddle:
http://jsfiddle.net/UCJmQ/
CSS:
.top {
background-color: lightblue;
height: 300px;
}
.bottom {
background-color: green;
min-height: 100px;
overflow: hidden;
height: 100%;
}
html, body {
height: 100%;
}
HTML:
<div class="top"></div>
<div class="bottom">
</div>
What I'm seeing now is the green page taking up the entire window's height, not the remaining height. How can I make it take the remaining height instead?
http://jsfiddle.net/ph35V/
<div class="wrapper">
<div class="top">
300px
</div>
<div class="bottom">
Remaining height
</div>
</div>
html, body {
height: 100%;
width: 100%;
margin: 0;
}
.wrapper {
display: table;
height: 100%;
width: 100%;
}
.top {
display: table-row;
background: lightblue;
height: 300px;
}
.bottom {
display: table-row;
height: 100%;
background: green;
}
Could also use box-sizing: border-box or conflicting absolute positions
Is that variable-height specified in CSS or not?
From the fiddle I assume it is. If that's the case, try position: absolute with left, bottom, right set to 0 and top to upper div height:
DEMO