I have a wrapper of fixed sizes with the image inside of it:
.wrapper {
background: yellowgreen;
width: 8em;
height: 8em;
display: flex;
align-items: center;
justify-content: center;
border-radius: calc(11em / 12);
}
.wrapper img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
border: calc(1em / 12) solid black;
border-radius: calc(11em / 12);
}
This is ok:<br>
<div class="wrapper"><img src="https://audiophilesoft.ru/ASIO4ALL/asio4all.png" alt=""></div><br>
This is not ok:<br>
<div class="wrapper"><img src="https://audiophilesoft.ru/design/icons/go.png" alt=""></div>
I need any image to fit the wrapper - with maximum size available, keeping proportions, without cut, and I need the image border to always stick to the image contour (without any gaps between the image and the border). Now it works only for images which sizes are >= wrapper sizes, small images just don't scale.
If I specify width/height instead of max-*, the border becomes fixed and doesn't stick to images contour (there is a vertical or horizontal gap between the border and the image).
How to achieve this? Maybe some CSS tricks, additional wrappers? Actually object-fit works as I need, I just need the border that will stick to image.
Change width and height to max-width and max-height, respectively, in .wrapper:
And do the inverse in .wrapper img selector:
.wrapper {
max-width: 8em;
max-height: 8em;
display: flex;
align-items: center;
justify-content: center;
}
.wrapper img {
width: 100%;
height: 100%;
object-fit: contain;
border: calc(1em / 12) solid black;
border-radius: calc(11em / 12);
}
<div class="wrapper"><img src="https://images.tcdn.com.br/img/arquivos/355878/images/icons/us-flag.png?v=c4a83628611cc4338b8d08bee8d670ae" alt=""></div>
The original image is 32x16: link
As pointed out, my previous solution wasn't what OP actually sought for, so I've updated the answer below with what I believe is a solution. This also works with display:flex.
I've added an extra div called .inner-wrap to make sure that the border exactly surrounds the image at all times and doesn't overflow the container.
.wrapper {
background: yellowgreen;
width: 8em;
height: 8em;
display: flex;
align-items: center;
justify-content: center;
border-radius: calc(11em / 12);
overflow:hidden;
box-sizing:border-box;
}
.wrapper img {
max-height:100%;
width:100%;
display:block;
}
.inner-wrap{
width: 100%;
max-height: 100%;
border:2px solid red;
border-radius: calc(11em / 12);
box-sizing:border-box;
overflow:hidden;
}
This is ok:<br>
<div class="wrapper"><div class="inner-wrap"><img src="https://audiophilesoft.ru/ASIO4ALL/asio4all.png" alt=""></div></div><br>
This is ok?<br>
<div class="wrapper"><div class="inner-wrap"><img src="https://audiophilesoft.ru/design/icons/go.png" alt=""></div></div>
This is ok?<br>
<div class="wrapper"><div class="inner-wrap">
<img src="https://s-media-cache-ak0.pinimg.com/originals/aa/ca/3d/aaca3dc87cede5635530a8448dd39a58.jpg" alt=""></div></div>
Related
Let's say i have rectangular image with dimensions of 1400px(height)x700px(width). I want to square it in the way that the image would keep its original stretch and the sides would be white. I do not want to crop the image - want it to fully fit into square.
Do you know how it can be achieved over CSS/Bootsrap?
You can use CSS flexbox on your container to center your image, and then use max-width and max-height to confine the image to your container proportionally.
body {
background-color: #f7f7f7;
}
.square-img-container {
float: left;
display: flex;
align-items: center;
justify-content: center;
width: 160px;
height: 160px;
background-color: white;
border: 1px solid #eee;
margin: 10px;
}
.square-img-container img {
max-height: 100%;
max-width: 100%;
}
<div class="square-img-container">
<img src="https://via.placeholder.com/700x1400.png" alt="">
</div>
<div class="square-img-container">
<img src="https://via.placeholder.com/1400x700.png" alt="">
</div>
I have an interesting issue where the background image of an element is not showing up the same between the two browsers. Chrome 65, FF 59.
I'm using the technique to show a ratio of the background image using padding-top percentage, where height is zero.
A codepen is also included.
https://codepen.io/anon/pen/OvGeeJ
A quick thing to note. The content div was only for visually knowing when the flex container ended.
It seems like the way % is calculated is different.
body{
border: 0;
padding: 0;
margin: 0;
}
.flex{
display: flex;
position: relative;
width: 100%;
flex-direction: row;
flex-wrap: wrap;
height: 300vh;
background: black;
align-items: flex-start;
}
.stickybg{
height:0;
width: 100%;
background-image: url(https://i.imgur.com/8bKkEfR.jpg);
background-size: 100% auto;
background-repeat: no-repeat;
padding-top: 19%;
}
.content{
height: 100vh;
background: #111;
}
<div class="flex">
<div class="stickybg"></div>
</div>
<div class="content"></div>
As dholbert said in a comment, it appears FF beta 60 has the issue fixed.
A workaround is to use VH or VW units which in my case would simulate the same thing.
Replacing
padding-top: 19%;
for
padding-top: 19vw;
I want to center a div and it's text, in a 100%-screen-width div, which is in a smaller wrapper.
.wrapper {
height: 800px;
width: 900px;
margin: auto;
background-color: #000000;
}
.box-wrapper {
width: 1000%;
position: relative;
left: -500%;
background-color: #FF6600;
}
.box {
background-color: #FF0000;
width: 600px;
position: relative;
left: 50%;
color: #00FF00;
}
span {
text-align: center;
display: block;
}
<div class="wrapper">
Random text for wrapper-div
<div class="box-wrapper">
<div class="box">
<span>ABC</span>
<span>DEF</span>
<span>GHI</span>
</div>
</div>
</div>
This code is kind of working but not perfect.
The red div should be moved a bit to the right, also the way
of doing it is not the best in my opinion.
I want a more robust and responsive solution.
To be more clear, it's for the pink division on the bottom
of this website: http://ndvibes.com
There the code is working 99% of the times and reponsive. But on some computers/screens it's 50% off. So I want a less-hacky (without transform etc) and more standard, robust way of getting that effect.
Wrapper 900px > 100%-screen-width coloured div > Centered text in that coloured div.
How can I achieve this the best as possible?
Thanks!
How about this approach, using absolute positioned pseudo elements. The outer-space div with overflow:hidden is to prevent a horizontal scroll bar appearing. I have added padding-top to the .wrapper just so you can see the snippet running in full screen mode.
body {
margin:0;
}
.outer-space {
overflow: hidden;
padding-top:80px;
}
.wrapper {
height: 800px;
width: 100%;
max-width: 900px;
margin: auto;
background-color: #000000;
}
.box {
background-color: #8904B1;
margin:0 auto;
color: #ffffff;
position: relative;
z-index: 2;
padding:10px 0;
}
.box-wrapper {
position: relative;
width:100%;
max-width: 600px;
margin:0 auto;
}
.box-wrapper:before, .box-wrapper:after {
content:"";
position: absolute;
height:100%;
width:100vw;
background-color: #8904B1;
top: 0;
z-index: 1;
}
.box-wrapper:before {
left:-100%;
}
.box-wrapper:after {
right:-100%;
}
span {
text-align: center;
display: block;
}
<div class="outer-space">
<div class="wrapper">
Random text for wrapper-div
<div class="box-wrapper">
<div class="box">
<span>Crazy full width window</span>
<span>absolute positioned pseudo elements</span>
<span>with centered content div and centered text thingy</span>
<span>all inside of a fixed width page wrapper!</span>
<br><span>““”̿ ̿ ̿ ̿ ̿’̿’̵͇̿̿з=(•̪●)=ε/̵͇̿̿/̿ ̿ ̿ ̿ ̿’““</span>
</div>
</div>
</div>
</div>
To center child element, add the following to the parent wrap will center all child.
display: flex;
align-items: center;
justify-content: center;
If you want 100% screen width, use viewport (100vw) for 100% screen width
viewport
The #viewport CSS at-rule contains a set of nested descriptors in a CSS block that is delimited by curly braces. These descriptors control viewport settings, primarily on mobile devices.
1vw = 1% of viewport width
1vh = 1% of viewport height
1vmin = 1vw or 1vh, whichever is smaller
1vmax = 1vw or 1vh, whichever is larger
REF: #viewport
REF: Viewport Sized Typography
body {
margin: 0;
}
.wrapper {
height: 800px;
width: 900px;
margin: auto;
background-color: #000000;
}
.box-wrapper {
width: 900px;
max-width: 900px;
position: relative;
background-color: #FF6600;
display: flex;
align-items: center;
justify-content: center;
}
.outer-wrapper {
width: 100vw;
display: flex;
align-items: center;
justify-content: center;
}
.box {
width: 80%;
background-color: #FF0000;
position: relative;
color: #00FF00;
}
span {
text-align: center;
display: block;
}
<div class="outer-wrapper">
<div class="wrapper">
<p>Random text for wrapper-div</p>
<div class="box-wrapper">
<div class="box">
<span>ABC</span>
<span>DEF</span>
<span>GHI</span>
</div>
</div>
</div>
</div>
I have a fixed div with the css width: 400px; height: 280px; but my image comes from various dimension, some are portrait some landscape. How do I fit/stretch/fill my image regardless of source size into the div size?
#giorgi-parunov has the simplest and best method. owever if you want to use , I suggest that you use css to make the image responsive to the div.
img {
max-width:100%;
height: auto
}
You can also use object-fit: cover
If you have fixed size on div you can just set height/width of img to 100%.
div {
width: 150px;
height: 50px;
border: 1px solid black;
}
img {
width: 100%;
height: 100%;
}
<div>
<img src="http://cdn2.spectator.co.uk/files/2016/04/iStock_000069830477_Small.jpg">
</div>
If you want to fill div but you also want to keep image aspect ratio you can use object-fit: cover that is similar to background-size: cover when you use img as background.
div {
width: 100px;
height: 150px;
border: 1px solid black;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
}
<div>
<img src="http://cdn2.spectator.co.uk/files/2016/04/iStock_000069830477_Small.jpg">
</div>
I think the best way yo do it , do it with background-image.
HTML<div style="background-image: url("paper.gif"); background-size: cover; background-position: center;"></div>
It is the best way to add your image to the div without Javascript.
You can check this answer to fit any image in a container centered
https://stackoverflow.com/a/36063374/2894798
In your case the code would be
.container {
display: flex;
justify-content: center;
align-items: center;
border: 1px solid;
width: 400px; /*customize to your needs 100%*/
height: 280px; /*customize to your needs*/
}
.container img
{
max-width:100%;
max-height:100%;
}
here is the fiddle
I am trying to make my site IE9 compatible but I am using flex boxes in lots of places so I need an alternate method for evenly spacing child elements.
My design is responsive so I need the same effect as flexbox where I can evenly space elements but I am not sure how to do it.
Here is a snippet to show how I am using flexbox in my layout.
#container{
width: 500px;
height: 700px;
border: 1px solid #000;
padding: 10px;
display: flex;
flex-direction: column;
justify-content: space-around;
}
.ele1, .ele2, .ele3{
flex: 0 0 auto;
}
.ele1{
height: 200px;
background-color: red;
}
.ele2{
height: 50px;
background-color: blue;
}
.ele3{
height: 100px;
background-color: green;
}
<div id="container">
<div class="ele1"></div>
<div class="ele2"></div>
<div class="ele3"></div>
</div>
How do I do this without flexbox?
You could use Masonry which is a pure JavaScript (it also supports jQuery), as there are no CSS equivalent, if you do/can not use flexbox.
Use margin-top and margin-bottom in percentages. The distribution is roughly dependant upon how tall each box is. I estimated that there's a total of 10% vertical space inside the container that comprises of padding and borders. That leaves 90% to distribute between the inside walls of the container and between themselves.
#container{
width: 500px;
height: 700px;
border: 1px solid #000;
padding: 10px;
/*display: flex;
flex-direction: column;
justify-content: space-around;*/
}
.ele1, .ele2, .ele3{
/*flex: 0 0 auto;*/
}
.ele1{
height: 200px;
background-color: red;
margin: 10% 0 15%;
}
.ele2{
height: 50px;
background-color: blue;
margin: 25% 0 15%;
}
.ele3{
height: 100px;
background-color: green;
margin: 25% 0 0;
}
<div id="container">
<div class="ele1"></div>
<div class="ele2"></div>
<div class="ele3"></div>
</div>
I discovered a flex box polyfil https://github.com/10up/flexibility