I need to put the image in the parent container. The image is larger than the parent's size, need to scale the height of the parent and hide everything oversized. The width of the parent is not explicitly defined, there is only the height calculated using Calc. Don't want to use background:url, because image will use area map
.container
{
height: calc(100vh - 56px);
overflow: hidden;
}
.container img
{
height: auto;
max-height: 100%
}
HTML
<div class="container">
<img src="/img/spec3/panel.png" />
</div>
better option to give it object-fit: cover as well
.container
{
height: calc(100vh - 56px);
overflow: hidden;
border: 5px solid red;
position: relative;
}
.container img
{
display: block;
position: absolute;
top: 50%;
left: 50%;
height: 100%;
width: 100%;
object-fit: cover;
transform: translate(-50%, -50%);
}
<div class="container">
<img src="https://s3-us-west-2.amazonaws.com/uw-s3-cdn/wp-content/uploads/sites/6/2017/11/04133712/waterfall.jpg" />
</div>
Here is solution
.container
{
height: calc(100vh - 56px);
overflow: hidden;
position: relative;
margin: 0;
}
.container img
{
display: block;
position: absolute;
top: 50%;
left: 50%;
max-height: 100%;
transform: translate(-50%, -50%);
}
Related
How can I center a div with max-width and max height, but also maintain it's aspect ratio?
My code so far centers div, but it does not maintain aspect ratio of 6:5 (height:width)
#main-content {
margin: 0 auto;
width: 100%;
max-width: 1200px;
height: 100%;
height: 500px;
background-color: #953d44;
position: relative;
}
#container {
width: 80%;
height: 80%;
max-height: 600px;
max-width: 500px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
position: absolute;
background-color: cornflowerblue;
}
<div id="main-content">
<div id="container"></div>
</div>
https://codepen.io/timsim/pen/dWMbqR
You couldnt notice the change because the main container itself had only 500px height. I have changed it to 1000px.
Run the following snippet and goto full screen mode, It actually works!
#main-content {
margin: 0 auto;
width: 100%;
max-width: 1200px;
height: 100%;
height: 1000px;
background-color: #953d44;
position: relative;
}
#container {
width: 80%;
height: 80%;
max-height: 600px;
max-width: 500px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
position: absolute;
background-color: cornflowerblue;
}
<div id="main-content">
<div id="container"></div>
</div>
P.S.: Ofc this wont work if main container height is less then the max height specified for the contanier.
I have a parent div and a child div. The child div has the position: absolute property. It is already centered, but I'd like to align it to the middle of the parent div. How do I go about doing that? Here's my jsFiddle
HTML
<div id='parent'>
<div id='child'>
</div>
</div>
CSS
#parent {
position: relative;
width: 500px;
height: 300px;
background-color: red;
}
#child {
position: absolute;
width: 70px;
height: 70px;
background-color: blue;
left: 0;
right: 0;
margin: 0 auto;
border-radius: 50%;
}
The solution is to use transform: translate(-50%, -50%) on the child div, like so:
#child {
position: absolute;
width: 70px;
height: 70px;
background-color: blue;
left: 50%;
top: 50%;
border-radius: 50%;
transform: translate(-50%, -50%);
}
https://jsfiddle.net/jwoy7rxr/
This works because the transform positions the item based on a percentage from it's own point of origin.
Since the parent has a height based on px, you can safely use a simple margin top and bottom to centre the element.
#parent {
position: relative;
width: 500px;
height: 300px;
background-color: red;
}
#child {
position: absolute;
width: 70px;
height: 70px;
background-color: blue;
left: 0;
right: 0;
margin: 115px auto;
border-radius: 50%;
}
Here's the fiddle: https://jsfiddle.net/Lr3fLser/
You need to give the parent:
#parent {
width: 500px;
height: 500px;
background-color: red;
display: table-cell;
vertical-align: middle;
}
#child {
width: 70px;
height: 70px;
background-color: blue;
border-radius: 50%;
}
You need the display table-cell in order to use the vertical-align.
Then add align="center" to the parent div's:
<div align="center" id="parent">
<div id='child'>
</div>
</div>
I have the updated JSFiddle attached:
https://jsfiddle.net/o7pzvtj3/2/
My layout consists of 3 DIVs
The first DIVis a wrapper.
The second DIV is centered and uses max-width:980px; Otherwise it defaults to 100% width.
The third DIV is 200px wide and uses absolute position. right:-200pxand top:0px position it next to the first DIV
This layout works perfect but only because the last DIVhas a width of 200px. If that DIV had a variable width I couldn't use right:-200px and it wouldn't place correctly.
So my question is what would I do if the DIV with absolute position had a variable width? How would I place it next to the main DIV?
Here is my code.
<div class="outer_container">
<div class="internal_alignment">
<div class="main_container"></div>
<div class="column_outside"></div>
</div>
</div>
CSS
.outer_container {
overflow: hidden;
position: relative;
}
.internal_alignment {
position: relative;
max-width: 980px;
margin: 0px auto;
}
.main_container {
height: 500px;
background-color: bisque;
}
.column_outside {
position: absolute;
top: 0px;
right: -200px;
height: 500px;
width: 200px;
background-color: black;
}
FYI: the outer_container DIV allows column_outside to sit outside the screen if the browser is smaller than 980px wide.
Make it a child of the main and give it left: 100%;
.outer_container {
overflow: hidden;
position: relative;
}
.internal_alignment {
position: relative;
max-width: 980px;
margin: 0px auto;
}
.main_container {
height: 500px;
background-color: bisque;
}
.column_outside {
position: absolute;
top: 0px;
left: 100%;
height: 500px;
width: 200px;
background-color: black;
}
<div class="outer_container">
<div class="internal_alignment">
<div class="main_container">
<div class="column_outside"></div>
</div>
</div>
</div>
After a second thought, simply use left: 100% instead of right: -200px;
.outer_container {
overflow: hidden;
position: relative;
}
.internal_alignment {
position: relative;
max-width: 980px;
margin: 0px auto;
}
.main_container {
height: 500px;
background-color: bisque;
}
.column_outside {
position: absolute;
top: 0px;
left: 100%;
height: 500px;
width: 200px;
background-color: black;
}
<div class="outer_container">
<div class="internal_alignment">
<div class="main_container"></div>
<div class="column_outside"></div>
</div>
</div>
Very simple:
.column_outside {
right: 0px;
-webkit-transform: translateX(100%);
-moz-transform: translateX(100%);
transform: translateX(100%);
}
Demo https://jsfiddle.net/n4nq6Lxt/
No need to change your HTML structure.
You can use transform: translateX(100%); what it does is to move the element to the right of the amount of the width of the element itself.
right: 0;
transform: translateX(100%);
I am trying to centre an img within a containing div, where the img fills (minimum) 100% of the width and height of that containing div, meaning thta the image automatically scales to maintain image ratio. It is easy for me to align that img to the top, bottom, left or right, but I am hoping to centre the img both vertically and horizontally. I have been unable to locate the solution thus far, so any help greatly appreciated.
HTML
<section id="hero-image">
<img src="https://s-media-cache-ak0.pinimg.com/originals/ae/1d/6e/ae1d6ef744320d237a95fc1e7d6ee98b.jpg">
</section>
CSS
#hero-image {
position: relative;
width: 100%;
height: 400px;
overflow: hidden;
background: red;
}
#hero-image img {
position: absolute;
min-height: 100%;
height: auto;
min-width: 100%;
width: auto;
margin: auto;
right: 0;
left: 0;
top: 0;
z-index: 0;
}
Fiddle
Use transform:translateX(-50) to manage this (but CSS3), large screen or small screen the image will always stay center and keep his ratio aspect.
Here the fiddle
Otherwise if you want something more cross browser you will probably need a bit of javascript, but I may be wrong.
Could you not set the hero image as a background? This will allow for more flexibilty both in terms of positioning and image size.
<section class="hero-image" style="background-image:url('https://s-media-cache-ak0.pinimg.com/originals/ae/1d/6e/ae1d6ef744320d237a95fc1e7d6ee98b.jpg');">
</section>
.hero-image {
width: 100%;
height: 400px;
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: cover;
}
This achieves what you've set out to do exactly. There's other benefits to this method too, for instance, responsive images.
The CSS above sets the properties for any background image within a div class of hero-image. All you need to do then, is inline the background-image itself.
NOTE: If this doesn't have to be CMS driven, you can simply apply the image to the class rather than have it inline.
If you're happy with CSS3 (not supported in some older browsers) you could do this:
#hero-image img {
position: absolute;
min-height: 100%;
height: auto;
min-width: 100%;
width: auto;
margin: auto;
left: 50%;
top: 50%;
z-index: 0;
-webkit-transform:translate(-50%, -50%);
-moz-transform:translate(-50%, -50%);
-ms-transform:translate(-50%, -50%);
-o-transform:translate(-50%, -50%);
transform:translate(-50%, -50%);
}
#hero-image {
position: relative;
width: 600px;
height: 400px;
overflow: hidden;
background: red;
}
#hero-image img {
position: absolute;
min-height: 100%;
height: auto;
min-width: 100%;
width: auto;
margin: auto;
left: 50%;
top: 50%;
z-index: 0;
-webkit-transform:translate(-50%, -50%);
-moz-transform:translate(-50%, -50%);
-ms-transform:translate(-50%, -50%);
-o-transform:translate(-50%, -50%);
transform:translate(-50%, -50%);
}
<section id="hero-image">
<img src="https://s-media-cache-ak0.pinimg.com/originals/ae/1d/6e/ae1d6ef744320d237a95fc1e7d6ee98b.jpg">
</section>
You can try this:
CSS
#hero-image {
position: relative;
width: 100%;
height: 400px;
overflow: hidden;
background: red;
}
#hero-image img {
position: absolute;
display:block;
height: auto;
margin: 0 auto;
top: 0;
z-index: 0;
min-height:100%;
width:100%;
left: -50%;
-webkit-transform: translateX(50%);
transform: translateX(50%);
}
HTML
<section id="hero-image">
<img src="https://s-media-cache-ak0.pinimg.com/originals/ae/1d/6e/ae1d6ef744320d237a95fc1e7d6ee98b.jpg">
</section>
DEMO HERE
You could also just set it as a background with background-size: cover. Like this: https://jsfiddle.net/wzjzjsdp/2/
.img1, .img2 {
height: 400px;
width: 300px;
background-image:url(http://placehold.it/350x150);
background-repeat: no-repeat;
background-position: center center;
background-size:cover;
display:inline-block;
}
.img2 {
width:500px;
height:400px;
}
<div class="img1"></div>
<div class="img2" style="background-image:url(http://placehold.it/350x250"></div>
EDIT: You can use inline style.
I'm having this code to create a circular image with css
<div class="round2">
<img src="http://fwncwww14.wks.gorlaeus.net/images/home/news/mbt_pasfoto_Dino_van_Dissel.jpg" />
</div>
.round2 {
border-radius: 50%;
overflow: hidden;
width: 150px;
height: 150px;
}
.round2 img {
display: block;
/* Stretch
height: 100%;
width: 100%; */
min-width: 100%;
min-height: 100%;
}
Now I would like to be the circle in the middle of the image instead of the top position of the image.. Does anyone of you know how to achieve this?
Thanks very much !
Just move it away by 50% and then transform it back 50%, like this:
.round2 {
border-radius: 50%;
overflow: hidden;
width: 150px;
height: 150px;
}
.round2 img {
display: block;
min-width: 100%;
min-height: 100%;
position: relative;
/* use `calc(50%)` if you want to be old-browser safe */
left: 50%;
top: 50%;
/* Be sure to prefix where necessary */
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
<div class="round2"><img src="http://placehold.it/450x350" /></div>
Now just position the outer .round2 class box to move your image around. This works because the translate function relates to the img elements width, and not the parent containers'.
Add display: inline-block; or display: block; to your .round2 class.
.round2 {
display: block; /* or inline-block */
border-radius: 50%;
overflow: hidden;
width: 150px;
height: 150px;
}