I made the following image to show my problem. Which CSS can I use to implement it?
For sure, i meant padding instead of margin of .page around the .image container...
Try something like this:
.page {
distplay: flex;
justify-content: center;
align-items: center;
}
.page .imagecontainer {
width: fit-content;
}
This could help you :)
.page {
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.imagecontainer {
max-height: 100%;
max-width: 100%;
}
Related
When height is reduced below certain limit the image placed at top of div is not visible and cannot be scrolled up as shown in the pictures. Can anyone tell on how to solve this.
Webpage when resized:
Full webpage:
body {
display: flex;
justify-content: center;
height: 100vh;
align-items: center;
}
.box {
background: lightblue;
width: 300px;
height: 500px;
min-height: 300px;
}
img {
position: relative;
top: -20px;
left: 120px;
}
<div class="box">
<img id="xy"src="https://placeimg.com/50/50/animals">
</div>
At "body" part of css, try "min-height" instead of "height".
/*your code*/
body{
display: flex;
justify-content: center;
height: 100vh;
align-items: center;
}
.box{
background: lightblue;
width: 300px;
height: 500px;
min-height: 300px;
}
/*try this one instead ("min-height" instead of "height") and (added "margin-top: 5vh" to ".box")*/
body{
display: flex;
justify-content: center;
min-height: 100vh;
align-items: center;
}
.box{
margin-top: 5vh;
background: lightblue;
width: 300px;
height: 500px;
min-height: 300px;
}
Your img is positioned relative to the nearest positioned ancestor. That means it is being placed -10px beneath the body, because .box does not have any position set.
I am having issues with a nested flexbox container with an image inside of it. I need the image to maintain its 16x9 ratio always and would like the parent (or another div) to always be the exact size of the image, as I am using its coordinates to create a laser pointer feature and send it to other users.
I currently have the following Code:
#container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
max-height: 100%;
height: 100%;
width: 100%;
padding: 0 2rem 2rem;
}
#container > div {
position: relative;
max-height: 100%;
height: 100%;
max-width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
#container img {
height: auto;
max-height: 100%;
width: auto;
max-width: 100%;
}
<div id="container">
<div id="inner">
<img src="https://dummyimage.com/1600x900/000000/fff">
</div>
</div>
The #inner div and image match size when the #container is wider than the image:
However, when the image is full width, the #inner div is taller than the image:
Removing the #inner height works for the smaller widths, however the image then blows out of the container as the screen gets wider:
I have also tried some other solutions, such as adding object-fit: contain; to the image, and using a ratio-class with a padding-top of 56.25%, but can't seem to get any of these solutions to be fully responsive.
Any ideas are much appreciated!
If I get the idea correctly should be like this.
html, body {
height: 100%;
}
body {
margin: 0;
}
#container {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
}
#inner {
display: flex;
align-items: center;
justify-content: center;
}
#inner img {
max-width: 100%;
max-height: 100%;
}
<div id="container">
<div id="inner">
<img src="https://dummyimage.com/1600x900/000000/fff">
</div>
</div>
Edit:
If you set your inner div as display inline block, it will always be the same size as the child image:
body{
margin: 0;
padding: 0;
box-sizing:border-box;
}
#container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
width: 100%;
padding: 2rem;
box-sizing: border-box;
}
#container > div {
position: relative;
display: inline-block;
background: red;
font-size: 0;
box-sizing: border-box;
}
#container img {
height: auto;
width: 100%;
max-width: 100%;
display: block;
}
as in this example: https://jsfiddle.net/nzs21bem/
Is this what you are looking for?
You need to add some styles to your image so the ratio is preserved.
And display the image as a block element instead of the default inline style,
which has some padding to it.
.imgblock {
background: red;
margin: 30px;
}
.imgblock img {
width: 100%;
max-width: 100%;
}
.imgblock1 img {
display: block;
}
<div class="imgblock imgblock1">
<img src="https://dummyimage.com/1600x900/000000/fff">
</div>
That should make the parent the same size as the child image.
As you can see the difference in these 2 examples: https://jsfiddle.net/no1rqx6f/
I'm trying to display an app bar and three images in a column, that uses 100% of the height of the screen. The images are supposed to use the whole width of the column with the rest being cut off. I can get it working with just divs, but I'm having trouble when using images.
Here is a version to illustrate how it should look like. This has an app bar of height 50 and three "images" that fill the rest of the space:
https://codepen.io/Meerpohl/pen/zYxRKRV
And here is what I get with images. The images stretch the heights of my divs and ultimately of everything else, resulting in that scrollbar. Instead I need thin slices of the images.
html, body {
height: 100%;
margin: 0;
}
.root {
height: 100%;
display: flex;
flex-direction: column;
}
.appbar {
height: 50px;
text-align: center;
background-color: coral;
}
.container {
flex: 1;
}
.item {
height:33.33%;
overflow:hidden;
}
img {
width: 100%;
object-fit: cover;
}
<div class="root">
<div class="appbar">
This is a nice app bar
</div>
<div class="container">
<div class="item">
<img src="http://www.kleines-meerwasseraquarium.de/wp-content/uploads/2016/02/Zitronengrundel.jpg">
</div>
<div class="item">
<img src="http://www.kleines-meerwasseraquarium.de/wp-content/uploads/2016/02/Zitronengrundel.jpg">
</div>
<div class="item">
<img src="http://www.kleines-meerwasseraquarium.de/wp-content/uploads/2016/02/Zitronengrundel.jpg">
</div>
</div>
</div>
https://codepen.io/Meerpohl/pen/eYmVdro
The code is the same in both cases. One just uses text instead images.
.item {
position: relative;
height:33%;
overflow:hidden;
}
img {
position: absolute;
transform: translateY(-50%);
width: 100%;
object-fit: cover;
}
this should work i think!
i'm on the train right now, so I can't give you a pen.
You can position the image absolute in the parent div (this should be relative) and translateY so it is centered.
Hope this is what you want to do ;)
use this!
img {width: 100%; object-fit: cover; max-height: 33.33vh; }
Try this:
html, body {
height: 100%;
margin: 0;
}
.root {
height: 100%;
display: flex;
flex-direction: column;
}
.appbar {
height: 50px;
background-color: coral;
display: flex;
justify-content: center;
align-items: center;
}
.container {
height: calc(100vh - 50px);
display: flex;
flex-direction: column;
}
.item {
overflow: hidden;
display: flex;
flex: 1;
}
img {
width: 100%;
object-fit: cover;
}
added calc to .container and display:flex on .item, removed some unused properties.
Codepen: https://codepen.io/Liveindream/pen/NWPygpx
Image stretches if I don't use object-fit contains. Stretches in width, losing aspect ratio.
object-fit contain fixes that.
The problem is, the element itself is not contained, just the visible image. Which means if I make the image clickable, the whole element area (even outside the image) is clickable.
https://jsfiddle.net/nyysyngp/10/ (or see code below)
I just want the visible image to be clickable. This seems to work on Firefox, but not Chrome.
body, html
{
margin: 0;
padding: 0;
background-color: red;
display: flex;
height: 100%;
width: 100%;
}
#media
{
display: flex;
background-color: #262423;
justify-content: center;
align-items: center;
flex-direction: column;
flex-grow: 1;
}
#media_split
{
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
align-items: center;
}
#media_image_container
{
height: 50%;
width: 100%;
flex-grow: 1;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
background-color: green;
}
#media_image
{
object-fit: contain;
max-height: calc(100% - 4em);
max-width: calc(100% - 4.7em);
min-height: 100px;
min-width: 100px;
cursor: pointer;
}
#media_tv
{
height: 50%;
width: 100%;
flex-grow: 1;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
background-color:blue;
}
<div id='media'>
<div id='media_split'>
<div id='media_image_container'>
<img id='media_image' src='https://i.imgur.com/F26h0tq.jpg'>
</div>
<div id='media_tv'></div>
</div>
</div>
Well some months later I found a solution. Just by adding "position: absolute" to #media_image the problem went away, which in my case didn't break anything else.
In #media_image_container remove display: flex; and add text-align: center;
It will fix the issue.
I have seen that while developing websites, vertically centering a container (of fixed height) inside a container of random height always comes as a nightmare for the web developer (at least, me) while when it comes to horizontal centering a container (of fixed width) inside a container of random width, the margin:0px auto; tends to serve an easy way out in the standard model.
When things can be as simple as that why doesn't CSS work out with the margin:auto 0px; when it comes to centering a container of fixed height inside a container of random height? Is there any specific reason to do so?
It's really less of a nightmare than you think, just don't use margins. vertical-align is really what you should rely on for fluid-height vertical centering. I threw together a quick demo to demonstrate my point:
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
text-align: center;
}
span {
height: 100%;
vertical-align: middle;
display: inline-block;
}
#any-height {
background: #000;
text-align: left;
width: 200px;
height: 200px;
vertical-align: middle;
display: inline-block;
}
<span></span>
<div id="any-height"></div>
See: http://jsfiddle.net/Wexcode/jLXMS/
The right answer for your question is that margin: auto 0 doesn't work the same way that margin: 0 auto works because width: auto doesn't work the same way height: auto does.
Vertical auto margin works for absolutely positioned elements with a known height.
.parent {
position: relative;
}
.child {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
width: 150px;
height: 150px;
margin: auto;
}
Use flexbox parent
One of advantages of using margin: auto compared to justify-content: center / align-items: center is ability to scroll child item that is overflowing parent
html, body {
height: 100%;
margin: 0;
}
.parent {
display: flex;
width: 100%;
height: 100%;
}
.inner {
width: 100px;
height: 100px;
background-color: green;
margin: auto;
}
<div class="parent">
<div class="inner">
</div>
</div>
CSS
.aligncenter{
display: -webkit-box;
display: -moz-box;
display: box;
-webkit-box-align: center;
-moz-box-align: center;
flex-align: center;
-webkit-box-pack: center;
-moz-box-pack: center;
flex-pack: center;
}
HTML
<div class="aligncenter">
---your content appear at the middle of the parent div---
</div>
.aligncenter {
display: -webkit-box;
display: -moz-box;
display: box;
-webkit-box-align: center;
-moz-box-align: center;
flex-align: center;
-webkit-box-pack: center;
-moz-box-pack: center;
flex-pack: center;
}
<div class="aligncenter">
---your content appear at the middle of the parent div---
</div>
Note
This CSS class work with almost all browsers