Trying to make the webpage fit into the screen so that you don't have to scroll up or down, or left and right. And the image is centered. Here is the current code:
#copyright {
top: 0px;
right: 11;
z-index: index 1;
}
#image {
position: absolute;
height: 2;
width: 2;
z-index: index 2;
}
<a href="https://lensdump.com/i/rSRDHc">
<img id="image" src="https://i3.lensdump.com/i/rSRDHc.png" alt="rSRDHc.png" border="0" /></a>
<div id="copyright"> ©apple </div>
Overflow wouldn't work if you wanted to scroll down to show more of the page. To fix that, you would have to crop the white background out of the image, which I'm unsure of why it's there in the first place, and it would also be best to make the background transparent after you crop it, in case you wanted to change the background colour.
You had the right set to 11, but didn't specify a value (same as your width and height on the image), which doesn't work at all; you have to specify a value e.g pixels or rem. And z-index: index [num] also isn't valid, it's just z-index: [num].
The alt tag on your image is a png file, which doesn't make much sense, it should be a description, or the link to the image.
#copyright {
right: 11px;
}
#image {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%) scale(.7);
z-index: -1;
}
body {
overflow: hidden;
}
<a href="https://lensdump.com/i/rSRDHc">
<img id="image" src="https://i3.lensdump.com/i/rSRDHc.png" alt="rSRDHc.png" border="0" /></a>
<div id="copyright"> ©apple </div>
You can achieve this with a containing div, flexbox, and the vh and vw declarations in css.
vh determines the view height, so 100vh is 100% of the window. With your assets I've stacked the image on 95% of the screen and the text below on 5%. vw works the same but for view width.
.container{
height: 95vh;
width: 100vw;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
#image{
width: 100%;
height: 100%;
}
#copyright{
height: 5vh;
width: 100vw;
text-align: center;
}
Here is a codepen: codepen
Related
I am trying to make a showcase section for a web page. It consists of a div with a (responsive) background image and a header that would be centered horizontally and vertically over this image. I've managed to get the image in and have it be responsive, and I've got the header centered, but my problem arises when the window size becomes smaller.
I'm using position: absolute, the top property, and transform to have it be centered, but the top property only works when height is specified in the parent container. However, when the window shrinks to the point where the image begins to shrink to below its original height, the text does not stay vertically centered, only horizontally (since I'm going off of the original height for top (800px)).
I can't just change the height with a media query since the image size is changing constantly and I can't not use height because then the top property would not work at all, so I'm a bit confused with how to get around this.
Here are the relevant sections of my code:
HTML:
<section class="showcase">
<div class="showcase-container">
<h1 class="centered"><span class="highlight">BR</span> Architects</h1>
</div>
</section>
CSS:
.container {
width: 80%;
margin: 0 auto;
padding: 0;
position: relative;
height: auto;
}
.showcase-container {
width: 80%;
margin: 0 auto;
padding: 0;
position: relative;
height: 800px;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
I might just guess because I don't know how does this really look, but I assumed few things and in a result instead of background image I would just use normal image, make it blocky and display div over it, you will have height preserved in any size, take a look:
.showcase-container {
width: 80%;
margin: 0 auto;
padding: 0;
position: relative;
}
.showcase-container img {
display: block;
width: 100%;
height: auto;
margin: 0 auto;
max-width: 1200px;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #fff;
border-radius: 5px;
padding: 10px 20px;
}
<section class="showcase">
<div class="showcase-container">
<img src="https://source.unsplash.com/random/1200x700" alt="">
<h1 class="centered"><span class="highlight">BR</span> Architects</h1>
</div>
</section>
See MDN's <figcaption> documentation.
<figure>
<img src="/media/examples/hamster.jpg" alt="a cute hamster" />
<figcaption>Hamster by Ricky Kharawala on Unsplash</figcaption>
</figure>
If I'm understanding this right, you're saying you don't need to worry about the image always maintaining an 800px height, you just want the h1 to remain centered. In that case, it's really simple.
Just add your image as a background, setting the background-size to cover, then make sure the container is never larger than the window by setting its height to 100vh, but never taller than 800px by setting its max-height.
.showcase-container {
/* your styles here */
background-image: url('yourimage.jpg');
background-size: cover;
height: 100vh;
max-height: 800px;
}
OR if you need it to be vertically centered in the window independently of the container, you can always change top: 50%; to top: 50vh; and position relative to the body.
https://imgur.com/PghL7ON
E1, E2, E3, E4 are UI elements and they will have eventually a hover effect on them. I also have a background image.
Here is what I was able to achieve so far.
<div class="bg">
<img src="bg.jpg" id="bg_id">
<div class="ui">
<img id="ui-elem1" src="ui-elem1.png">
</div>
</div>
and in the CSS part I have:
body {
overflow: hidden;
margin: 0 ;
}
.bg {
position: relative;
width: 100vw;
height: 100vh;
}
#bg_id {
position: absolute;
width: 100%;
height: 100%;
}
.ui {
position: relative;
width: 50vw;
left: 10vw;
top: 75vw;
}
/* 20% of ui */
/* 20% width 4 images = 4*20 = 80% padding = 6.6% */
#ui-elem1 {
position: absolute;
width: 20%;
height: 100%;
padding: 6.6%;
}
My code displays the background image fine, it resizes and it's always proportional to the viewport. But alas, when it comes to the UI I can't see the first UI element there. What to do?
Thank you.
EDIT: Here's a jsfiddle for it. https://jsfiddle.net/vq24a76p/1/ Doesn't show it proportionally to the viewport.
For this you could use background-image property an set the size to cover just like the example...
FIDDLE
.bg {
background-image:url('https://media.mnn.com/assets/images/2014/07/Mount-Fuji-Japan-Wintertime.jpg.1000x0_q80_crop-smart.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size:cover;
}
Another approach if you want to use an image tag, is to set the width:100% and height auto, the caveat in this is that some vertical images will have a blank space at the bottom...
What I am trying to accomplish:
- create a pop-up div (fixed), centered in view
- this pop-up should be 60% height of the browser window
- the contents of the pop-up should be an image and a 'x' above the upper right corner of the image
- the height of the image should be maximal, considering it should be contained in the div together with the 'x'
- the aspect ratio of the image should be maintained
I tried the following code
<div class="pop-up">
<p class="exit-button">x</p>
<img class="image" src="safari.png" width="1200" height="630" alt="" title="" />
</div>
With CSS:
body {
background: #333;
}
.pop-up {
position: fixed;
height: 60%;
width: auto;
left:50%;
top:50%;
-webkit-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
background:yellow;
object-fit: contain;
}
.exit-button {
text-align: right;
margin: 0;
font-size: 300%;
}
.image {
height: 100%;
width: auto;
opacity:0.7;
}
This code is not solving the problem, the image is not contained in the (yellow) div, as can be seen in the following screen shot:
http://www.michielvisser.nl/tmp/screenshot.jpg
How to contain the image in the div with maximal height for the image in the div and maintain aspect ratio?
SOLUTION 1: Remove the height and width from .pop-up and change height:100% in .image to height:60vh. That works perfectly. Apparently the child (img) will not adjust to the parent (div), but the parent (div) will adjust to the child (img). Sounds like real life.
SOLUTION 2: Essentially the problem arises when the window is resized (except in firefox). The solution can be to redraw the image after a resize, this solves the problem:
$(window).resize(function(){
$('img').hide();
setTimeout(function(){ $('img').show(); }, 1);
});
Your problems are:
You have an inline width and height set on your image, which is overriding the CSS styles for width and height on that image
The margin from your X is pushing the image down since the X is wrapped in a <p> tag.
You don't need object-fit at all.
The simple way to solve #1 is to delete the inline width and height from the image tag and leave it to the stylesheet.
Number 2 can be solved by wrapping the X in a div instead of a p, or you can use a pseudo element for it. I have taken the latter approach in the snippet below.
To solve #3, just delete the style from the stylesheet. (Having this property set in Safari actually messed things up for me.)
This snippet is tested in Safari 10.1.1. Note how the placeholder image is quite large by default (1000x800), but it only displays as big as it can per the parent div.
Edit: Based on your comments, let's revise this further so that we dictate the size on the image, and just let the wrapper take up the size of the image.
So on our image, in order to get it to be 60% as tall as the screen, we can do:
img {
height: 60vh;
width: auto;
}
Then, in our parent, we won't specify a width or height at all, but we can do display: flex just to make sure it is big enough to fit its contents.
body {
background: #333;
}
.pop-up {
display: flex;
position: fixed;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
background: yellow;
}
.exit {
color: black;
text-decoration: none;
text-align: center;
font-size: 300%;
display: block;
position: absolute;
top: -50px;
right: -40px;
width: 40px;
height: 50px;
}
.image {
height: 60vh;
width: auto;
opacity: 0.7;
}
<div class="pop-up">
X
<img class="image" src="http://placehold.it/1000x800" alt="" title="">
</div>
I put the image above the P tag and added some CSS to .exit-button and .image
From here you can adjust padding and sizing of the elements.
body {
background: #333;
}
.pop-up {
position: fixed;
height: 60%;
width: auto;
left:50%;
top:50%;
-webkit-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
background:yellow;
object-fit: contain;
}
.exit-button {
position: absolute;
text-align: right;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: 0;
font-size: 300%;
}
.image {
height: 100%;
width: auto;
opacity:0.7;
}
<div class="pop-up">
<img class="image" src="http://icons.iconarchive.com/icons/johanchalibert/mac-osx-yosemite/1024/safari-icon.png" width="1200" height="630" alt="" title="" />
<p class="exit-button">x</p>
</div>
I copied your code and edited it. Please tell me whether this is the output you wanted or not.
body {
background: #333;
}
.pop-up {
position: fixed;
height: 60%;
width: auto;
left:50%;
top:50%;
padding-top: 30px;
-webkit-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
background:yellow;
object-fit: contain;
}
.exit-button {
margin-top: -50px;
text-align: right;
margin-right: 0;
font-size: 300%;
}
.image {
margin-top: -20px;
height: 100%;
width: auto;
opacity:0.7;
}
<div class="pop-up">
<p class="exit-button">x</p>
<img class="image" src="safari.png" alt="" title="" />
</div>
Because of either needing to hardcode in the alignment of the image given the size or deal with weird convolution, I believe this is the best way:
Create a fixed overlay occupying the entirety of the screen, create a container of 60% height, align it in the center with flexbox and stick the image inside making it occupy the entire height. The aspect ratio will update automatically (only happens with height).
As for the button – give it absolute positioning and a right position of 0, and manually give the parent relative positioning (this is necessary).
<div id="popup">
<div id="container">
X
<img src="https://i.redd.it/gelilvo30mgz.jpg">
</div>
</div>
html,
body {
height: 100%;
}
#popup {
position: fixed;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
#container {
position: relative; !important // has to be specified for the children (anchor) to find the bound
height: 60%;
background: #333;
}
a {
right: 0;
position: absolute;
}
img {
height: 100%;
}
https://jsfiddle.net/L2nLjjxc/1/
I believe that's the least amount of convolution if you want it to be dynamic.
Hi I have a fluid container that is based on screen height and width in my website. I would like to have an image fill the container at all times as it expands in any direction based on screen size. The images used will vary in size and aspect ratio.
I have made an attempt with html and css below:
div {
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%, 0);
height: 80vh;
width: 80%;
background-color: red;
position: relative;
overflow: hidden;
}
img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
min-height: 100%;
min-width: 100%;
width: auto;
height: auto;
/* max-width: 100%; // If used Image needs to be tall enough to fill div */
/* max-height: 100%; // If used Image needs to be wide enough to fill div */
}
<div>
<img src="http://i.imgur.com/kOY2G57.jpg">
</div>
Without max-height and max-width, this works well if the img is smaller than the container but does not work if the images come out larger as they come out in their natural size and get cropped.
jsfiddle example
Is it possible to accomplish this task with just pure css?
Update
I also would like to avoid using background images as a solution and see if this is possible with just the img tag in place at the dom so as to avoid programing the img tags if possible.
Instead of using the <img> tag you can just give the <div> a background image with background-size: cover property. The background image will maintain the aspect ratio while covering the entire div container at all times.
<div></div>
div {
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%, 0);
height: 80vh;
width: 80%;
background: red url("http://i.imgur.com/kOY2G57.jpg") center center;
background-size: cover;
position: relative;
overflow: hidden;
}
Use object-fit for images to achieve the same result akin to background-size cover, contain:
.imgFit {
object-fit: cover; /* cover, contain */
display: block;
width: 100%;
height: 100%;
}
Use like:
<img class="imgFit" src="" alt="">
In my liquid layout, my div elements have the property position-fixed. This means that as I re-size the browser, all the elements remain in the same position but have shrunk or increased in size.
The problem is when I place a picture in one of my div elements, it does not scale to fit in my div element, therefore the image 'leaks' out of its div container.
What I need: a property on my div element and/or image so that the image stays the same size as the div container and when the page is re-sized, the image re-sizes as well. Here's what I have:
#div1 {
position: fixed;
background-color: blue;
width: 100%;
height: 10%;
opacity: .3;
}
#div2 {
background-color: green;
position: fixed;
opacity: .3;
left: 20%;
right: 20%;
top: 10%;
height: 40%;
width: 60%;
}
#div3 {
background-color: red;
opacity: .3;
position: fixed;
left: 20%;
right: 20%;
top: 50%;
height: 40%;
width: 60%;
}
#div4 {
background-color: tan;
opacity: .3;
position: fixed;
height: 80%;
right: 80%;
width: 20%;
top: 10%;
}
#div5 {
background-color: black;
opacity: .3;
position: fixed;
height: 80%;
width: 20%;
left: 80%;
top: 10%;
}
#div6 {
background-color: purple;
opacity: .3;
position: fixed;
top: 90%;
width: 100%;
height: 10%;
}
img {}
<div id="div1">
<p>div1</p>
</div>
<div id="div2">
<figure>
<img class="pictures" src="assets/me.jpg" />
<figcaption>
This is a picture.
</figcaption>
</figure>
</div>
<div id="div3">
<header>
<h1>Introducing Me</h1>
</header>
<p>div3</p>
<p>Hello eveyrone i am adan ramirez</p>
</div>
<div id="div4">
<p>div4</p>
</div>
<div id="div5">
<p>div5</p>
</div>
<div id="div6">
<p>div6</p>
</div>
make image background-image: url(..img);
and apply background-size: cover; on the same div.
The key here is cover property value as it tells browser to resize image while keeping aspect ratio to fit all sides.
#Sphinxxx suggested to use background-size: contain; which solved OP problem;`
Try this:
img {
height: 100%;
width: 100%;
object-fit: contain;
}
object-fit is a pretty cool CSS3 property.
Used with the contain value the image will increase or decrease in size within its container while maintaining its aspect-ratio.
Here's how CSS-Tricks describes it:
The object-fit property defines how an element responds to the height
and width of its content box. It's intended for images, videos and
other embeddable media formats in conjunction with the object-position
property. Used by itself, object-fit lets us crop an inline image by
giving us fine-grained control over how it squishes and stretches
inside its box.
Because browser support for this property is still somewhat weak, here's a polyfill that covers all major browsers including IE9: Polyfill for CSS object-fit property
For a deeper look here are a few references:
W3C CSS Image Values and Replaced Content Module Level 3
MDN object-fit
CSS-Tricks `object-fit
Have you tried :
img {
width: 100%;
}
Try:
img {
max-width: 100%;
max-height: 100%;
}
figure {
height: 100%;
width: 100%;
margin: 0;
}
figure is the parent element, so you need to set it's height/width as well. Also, the default styling on figure includes a margin, so you need to remove that to keep the image inside of the parent div. Also, you may need to make the max-height smaller to account for the caption if you want to keep that inside of the parent div.
You can also use width and height instead of max-* if you want the image to always fill the parent regardless of its native size.