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.
Related
I'm trying to center text over an image; however, whenever I resize it, the text does not stay vertically centered.
.hero-image {
margin: 0 auto;
}
.hero-image img {
width: 100%;
}
.hero-text {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
<div class="hero-image">
<img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-mission-background.jpg">
<div class="hero-text">
Here is the hero text
</div>
</div>
Here's what's happening:
Working properly:
Vertical centering is off when resizing:
Your css for your hero text looks good – If I'm understanding your question correctly, I think the image should be modified to use 100 viewport width / height rather than 100%.
body {
margin: 0;
}
.hero-image img {
width: 100vw;
height: 100vh;
object-fit: cover;
}
.hero-text {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
You need to set the boundary of the container for positioned child. Add position: relative to .hero-image class. Otherwise it's using the next relative parent for it.
.hero-image {
margin: 0 auto;
position: relative;
}
.hero-image img {
width: 100%;
}
.hero-text {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
text-align: center;
color: red;
}
<div class="hero-image">
<img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-mission-background.jpg">
<div class="hero-text">
Here is the hero text
</div>
</div>
You can try this translate-free solution:
.hero-text {
position: absolute;
top: 33vw;
text-align: center;
width: 100%;
}
If you plan to keep the image stretched over the whole width.
You can do it with "display: flex".
.hero-image {
background-image: url(https://content.codecademy.com/courses/freelance-1/unit-4/img-mission-background.jpg);
background-size: cover;
background-position: center;
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.hero-image img {
width: 100%;
}
.hero-text {
}
I am trying to build a div that should cover all the visible page. Inside this div there should be another one placed in the center (horizontally and vertically). this is what I have done so far:
.spinner-box {
background-color: #0F83E8;
background-size: cover;
}
.spinner {
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #0000cc;
text-align: center;
}
<div class="spinner-box">
<div class="spinner">
my content
</div>
</div>
The inner div is visible but I can't the backgroud color of the outer one.
I know this question has been asked many times but i can't find an example with a div covering all the page
body {
margin: 0;
padding: 0;
}
.spinner-box {
background-color: #0F83E8;
background-size: cover;
position: absolute;
height: 100%;
width:100%;
}
.spinner {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #0000cc;
}
<div class="spinner-box">
<div class="spinner">
my content
</div>
</div>
You need to add some styles to .spinner-box:
.spinner-box {
background-color: #0F83E8;
background-size: cover;
position: absolute;
height: 100%;
width:100%;
}
.spinner {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #0000cc;
}
<div class="spinner-box">
<div class="spinner">
my content
</div>
</div>
There's a few factors here.
The parent element hasn't been given the maximum dimensions to cover
the viewport.
The className is not a correct HTML attribute in this situation, is
should be class.
Browsers have default settings which may mean that the body for
example has a margin so the whole viewport won't be covered.
I don't know why the top of the element was set to 40% if it is to be
centered that should be 50%. Of course if there is a reason for the
40% reinstate it.
This snippet alters these
* {
margin: 0;
padding: 0;
}
.spinner-box {
background-color: #0F83E8;
rbackground-size: cover;
position: relative;
width: 100vw;
height: 100vh;
}
.spinner {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #0000cc;
text-align: center;
}
<div class="spinner-box">
<div class="spinner">
my content
</div>
</div>
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%);
}
I have 2 images (both 3000px x 3000px) and I have one as background and one in front of it (frontal one will rotate).
Problem now is that I always start at top/left corner (0px x 0px)...I want to start at 1500px from left and 1500px from top (=center of the image), so without overflow:hidden, you can see the x/y scrollbars centered (vertical/horizontal).
Is there some way to achieve this effect?
html,
body {
position: relative;
background: url(stripes.jpg) no-repeat;
background-position: center;
margin: 0;
padding: 0;
width: 3000px;
height: 3000px;
overflow: hidden;
}
.stars{
position: absolute;
width: 3000px;
height: 3000px;
border: 2px solid red;
z-index: 99;
background: url(squares.jpg) no-repeat center;
}
these (bad) images will give you some understanding of the wanted effect
Try this:
#container {
position: absolute;
width: 100vw;
height: 100vh;
overflow: hidden;
}
#image {
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
}
I have been trying to keep the text inside the image when I resize the browser. I've tried floating it as well.
<div class="image">
<img src="background2.jpg">
<h1>Hello</h1>
</div>
And here is the CSS
.image img{
width: 90%;
display: block;
margin: auto;
position: relative;
}
h1{
position: absolute;
top: 50%;
left: 50%;
width: 100%;
}
You want the parent element (.image) to be position: relative so that it's what the h1 will be absolutely positioned relative to. You can also give it the width and margin that center it at 90% of the page. Then make the image 100% width of the parent, and use top: 50%; left: 50%; transform: translate(-50%,-50%); to absolutely center the text vertically and horizontally.
.image {
width: 90%;
display: block;
margin: auto;
position: relative;
}
.image img {
width: 100%;
display: block;
}
.stuff {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin: 0;
}
<div class="image">
<img src="http://kenwheeler.github.io/slick/img/fonz1.png">
<div class="stuff">
<h1>Hello</h1>
<h2>Foobar</h2>
</div>
</div>
You can try making the image the background of the parent div:
<div class="image">
<h1>Hello</h1>
</div>
The css would look something like this:
.image {
background: url('background2.jpg') no-repeat center center;
background-size: cover;
}