Trying to make it so images will resize themselves to fit in a square container.
I want to make it so no matter the size of an image, it will resize itself to fit the container, but keep its aspect ratio.
Here is my HTML code so far:
<div id="product-details">
<div id="product-image-display">
<div>
<div>
<span><img src="img/product-images/IBANEZ-AW300ECE-DARK-VIOLIN-SUNBURST-02.JPG"></span>
</div>
</div>
</div>
</div>
And CSS:
div#product-details div#product-image-display {
position: relative;
width: 100%;
overflow: hidden;
}
div#product-image-display:before {
content: "";
display: block;
padding-top: 100%;
}
div#product-details div#product-image-display div {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
}
div#product-details div#product-image-display div div {
display: table;
width: 100%;
height: 100%;
}
div#product-image-display div div span {
display: table-cell;
text-align: center;
vertical-align: middle;
overflow: hidden;
}
div#product-details div#product-image-display div div span img {
height: 100%;
}
Here's what it's doing now:
image
I want the image to resize and keep its aspect ratio, no matter what size it is. I can't just do width: 100%, as images that are tall and thin will not resize height properly. And I can't do the opposite, because of a similar but opposite problem. I can't do if statements with CSS, can I? (if img width > img height, then img width: 100%, etc.) That's a logical way I could do this.
Is there any way to do this without javascript/purely CSS/HTML?
EDIT: Big question rephrase.
Using width: 100% is the easiest way.
Try:
div#product-details div#product-image-display div div span img {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
}
How about putting your image as background instead of a <img src=...tag?
You could then use background-size: contain;in your css, like this:
HTML
<div id="product-details">
<div id="product-image-display">
<div>
<div>
<span style='background-image: url(http://placehold.it/20x75)'></span>
</div>
</div>
</div>
</div>
CSS
div#product-details div#product-image-display {
position: relative;
width: 100%;
overflow: hidden;
}
div#product-image-display:before {
content: "";
display: block;
padding-top: 100%;
}
div#product-details div#product-image-display div {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
}
div#product-details div#product-image-display div div {
display: table;
width: 100%;
height: 100%;
}
div#product-image-display div div span {
display: table-cell;
text-align: center;
vertical-align: middle;
overflow: hidden;
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}
div#product-details div#product-image-display div div span img {
height: auto;
width: auto;
}
Fiddle
Related
I'm trying to put a div next to a fixed div, but what happens instead is the div is put inside the fixed div. How can I make it so that the div is placed next to the fixed div? I know I can use float: right with the div, but is there a way of doing it without using floats, with just inline-block? Here's the jsFiddle.
HTML
<div id='column'>
</div>
<div id='content'>
</div>
CSS
body {
height: 100%;
}
#column {
display: inline-block;
position: fixed;
width: 20%;
min-height: 100%;
background-color: red;
vertical-align: top;
z-index: -1;
}
#content {
display: inline-block;
background-color: black;
width: 100px;
height: 200px;
}
Since your fixed element is 20% wide, you can use margin-left: 20% to move #content to the right of it.
body {
height: 100%;
}
#column {
display: inline-block;
position: fixed;
width: 20%;
min-height: 100%;
background-color: red;
vertical-align: top;
z-index: -1;
}
#content {
display: inline-block;
background-color: black;
width: 100px;
height: 200px;
margin-left: 20%;
}
<div id='column'>
</div>
<div id='content'>
</div>
I have a responsive design with a header image which is placed in a container. The image has width:100%; and height:auto; so it grows as you enlarge the viewport. I don't want to exceed a certain height so the container has a max-height. The image still grows but now the bottom part is cut off now because it aligns to the top of the container.
I would like the image to stay vertically centered in it's container so that parts of the image are cut off at the top and at the bottom. The outcome should look like this:
The header images are uploaded by users so they might have different heights therefore I cannot work with specific pixel-values. Is there a CSS-solution for this or do I have to use JavaScript?
Here is the code:
.wrapper {
width: 90%;
max-width: 600px;
margin: 1em auto;
background-color: #E9ADAD;
}
.container {
text-align: center;
height: auto;
line-height: 200px;
max-height: 200px;
overflow: hidden;
}
img {
width: 100%;
height: auto !important;
vertical-align: middle;
}
<div class="wrapper">
<div class="container">
<img src="http://placehold.it/600x300/C00000/FFFFFF&text=Image+vertically+centered">
</div>
</div>
And I prepared a fiddle.
You can use absolute positioning for your image , negative top/bottom values and margin:auto; to verticaly center the image in the container :
.wrapper {
width: 90%;
max-width: 600px;
margin: 1em auto;
background-color: #E9ADAD;
max-height: 200px;
}
.container {
position:relative;
padding-bottom:40%;
overflow: hidden;
}
img {
position:absolute;
top:-50%; bottom:-50%;
margin:auto;
width: 100%;
height: auto;
}
<div class="wrapper">
<div class="container">
<img src="http://placehold.it/600x300/C00000/FFFFFF&text=Image+vertically+centered">
</div>
</div>
Not so long ago there was only a javascript way to do this but now we have some css rules: object-fit and object-position
They work just like the background-size rules cover and contain:
.container img{
width: 100%;
height: auto;
}
#supports(object-fit: cover){
.container img{
height: 100%;
object-fit: cover;
object-position: center center;
}
}
The problem with this approach is that is very new and doesn't work on ie or Edge yet.
Pen here: http://codepen.io/vandervals/pen/MwKKrm
EDIT: Please, see that you need to declare the width and the height of the image, or it won't work.
.wrapper {
width: 90%;
max-width: 600px;
margin: 1em auto;
}
.container {
height: 200px;
overflow: hidden;
}
.imgWrapper {
position: relative;
width: 200%;
height: 200%;
top: -50%;
left: -50%;
}
img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
height: auto;
width: 50%;
}
<div class="wrapper">
<div class="container">
<div class="imgWrapper"><img src="http://placehold.it/600x300"></div>
</div>
</div>
http://jsfiddle.net/ghygpw8t/5/
inspired by: https://css-tricks.com/perfect-full-page-background-image/
Try like this: Demo
If image size is small it will be arranged in vertical middle and if its big, it will fit in box.
CSS:
.wrapper {
width: 90%;
max-width: 600px;
margin: 1em auto;
}
.container {
text-align: center;
line-height: 200px;
overflow: hidden;
background-color:#ccc;
vertical-align:middle;
height: 200px;
border:2px solid green;
display: flex;
width: 100%;
align-items: center;
justify-content: center;
}
img {
width: 100%;
max-height: 196px;
border:2px solid red;
vertical-align: middle;
line-height: 196px;
}
Hope this is what you want!
On the element you want centered.
.element {
position: relative;
top: 50%;
transform: translateY(-50%);
}
on its parent.
.parent { transform-style: preserve-3d; }
Use a polyfill to render cross browser styles.
I know when using 100% height the elements parents must have 100% height.
I want to make .overlay height: 100%; but I can't get it to work.
If I change .col to height: 100% it works but I don't want .col to be 100%.
http://jsfiddle.net/8HfjV/
Is there anyway around this? I noticed if I give an a tag display:block and height: 100%; that works. So is there a way to do it for a DIV?
HTML:
<div class="col col1">
<a href="#">
<div class="overlay"></div>
<img src="#">
</a>
</div>
CSS:
html, body {
height: 100%;
}
.col {
float: left;
display: block;
Position: relative;
}
.col a {
display: block;
height: 100%;
}
.col img {
width: 100%;
display: block;
height: auto;
}
.overlay {
height: 100%;
background: #000;
z-index: 1;
display: block;
}
.col1 {
width: 25%;
}
Since the class name is overlay I believe you want it to overlap the img?
If so use position: absolute;. Your div is set to height: 100%; but its width is 0 so change it to 100% as well.
Demo
You need to add position: relative to the <a /> and position: absolute; width:100%;height:100% to the .overly
here is the demo
I have an absolute positioned div and an image inside it, can I vertically allign the image to the center of the previous div? It might look like a repost and actually might be, but i couldn't find an answer to suit me.
<div id="filteredImgContainer">
<img id="loading" src="images/loader.gif" height="328" alt="" />
</div>
css:
#filteredImgContainer {
height: 328px;
width: 251px;
max-height: 328px !important;
max-width: 251px !important;
position: absolute;
left: 340px;
top: 196px;
}
.filteredImg {
display:block;
margin:auto;
height: auto !important;
width: auto !important;
max-height: 328px !important;
max-width: 251px !important;
}
i've tried this and it worked:
#filteredImgContainer
{
height: 100px;
width: 100px;
max-height: 328px !important;
max-width: 251px !important;
position: absolute;
border:solid 1px black;
}
#loading
{
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
If you set .filteredImgContainer > img { display: inline-block; vertical-align: middle; } That should align the element to the middle of the containing div. Then you can style the containing div to move the image where you want it to go.
If your img element is meant to have the class .filteredImg then change display: block to display: inline-block and add your vetical-align: middle;.
Adding following after your CSS rules will align the image to center
#filteredImgContainer:before{width: 1px; display: inline-block; height: 328px; vertical-align: middle; content: ''; margin-left: -1px;}
#loading{ vertical-align: middle; }
I'm trying to center a div vertically using line-height, without specifying a set pixel value for the line-height. I need the line-height to expand to the size of it's div. Using '100vh' works, but viewport units aren't widely supported widely enough. Setting the line-height to 100% doesn't seem to work. Here's my HTML:
<div class="background">
<div class="lightboxbg">
<div class="wrapper">
<div class="centerme"></div>
</div>
</div>
</div>
And my CSS:
html, body {
width: 100%;
height: 100%;
padding: 0px;
margin: 0px;
}
.background {
width: 90%;
height: 100%;
background-color: AntiqueWhite;
}
.lightboxbg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: black;
vertical-align: middle;
text-align: center;
}
.wrapper {
vertical-align: middle;
line-height: 100%;
height: 100%;
width: 100%
}
.centerme {
vertical-align: middle;
display: inline-block;
width: 100px;
height: 100px;
background-color: blue;
}
And here's a jsfiddle. The blue box would be centered if I could get the line-height of wrapper to expand to the height of wrapper, but I don't know how to go about doing that. Thanks for reading.
EDIT: Check out Nathan Lee's answer for a solution with table cells, Fredric Fohlin's for a pretty wild 'absolute positioning' answer, and MM Tac's for a solution using absolute positioning.
Here you go.
WORKING DEMO
The CSS Change:
.lightboxbg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: black;
vertical-align: middle;
text-align: center;
display: table;
}
.wrapper {
vertical-align: middle;
line-height: 100%;
height: 100%;
width: 100%;
display: table-cell;
}
Hope this helps.
Have a look at this idea. It may suit you: http://coding.smashingmagazine.com/2013/08/09/absolute-horizontal-vertical-centering-css/
.Center-Container {
position: relative;
}
.Absolute-Center {
width: 50%;
height: 50%;
overflow: auto;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
In your case the wrapper needs the relative positioning, and the "center me" the absolute positioning.
Replace .centerme with following css:
CSS:
.centerme {
width: 100px;
height: 100px;
background-color: blue;
position: absolute;
left: 50%;
top: 50%;
margin-left: -50px; /* negative-half of element's width*/
margin-top: -50px; /* negative-half of element's height*/
}
Here is a DEMO and here is a full page RESULT.
UPDATE
To center div for variable length is simple, just remove height, width, margin-left, margin-top reference from .centerme css.
.centerme {
background-color: blue;
position: absolute;
left: 50%;
top: 50%;
}
Here is a UPDATED DEMO.