How can I have my image centered horizontally (and if possible vertically also) ?
HTML
<div class="wholeHeight">
<img src="http://www.online-image-editor.com//styles/2014/images/example_image.png" class="ajustImageToScreenResolution">
</div>
CSS
.wholeHeight
{
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
}
.ajustImageToScreenResolution
{
max-width: 100%;
max-height: 100%;
}
jsFiddle: http://jsfiddle.net/0exjyfz5/
The best way out would be:
<div class="wholeHeight">
<div class ="myImage">
<img src="http://www.online-image-editor.com//styles/2014/images/example_image.png" class="ajustImageToScreenResolution">
</div>
</div>
.wholeHeight {
position: relative;
}
.myImage{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, +50%);
}
.ajustImageToScreenResolution
{
max-width: 100%;
max-height: 100%;
}
Fiddle:http://jsfiddle.net/0exjyfz5/8/
Please check with this I made some changes in the css will help you
<div class="wholeHeight">
<img src="http://www.online-image-editor.com//styles/2014/images/example_image.png" class="ajustImageToScreenResolution">
</div>
wholeHeight
{
text-align:center;
}
.ajustImageToScreenResolution
{
max-width: 100%;
max-height: 100%;
display:inline-block;
}
To center it vertically put the image in a div, make the div the same height and width as the image, and set both "margin-left" and "margin-right" to auto for the div. This will center it vertically.
Please add the following code.
<center><div class="wholeHeight">
<img src="http://www.online-image-editor.com//styles/2014/images/example_image.png" class="ajustImageToScreenResolution">
</div></center>
Thanks is always appreciated.
Related
I'm not sure how to position these images on a webpage properly - here's a rough outline of the positioning (the squares are the images).
I know I need to use absolute positioning because the images overlap each other, but I'm not sure how to make this responsive without using a lot of media queries.
Here's the code for my attempt:
<section id="homepage">
<img src={Square} alt="blah" className='image image1'/>
<img src={Square} alt="blah" className='image image2'/>
<img src={Square} alt="blah" className='image image3'/>
</section>
#homepage {
height: 100vh;
background: #ffb6b6;
}
.image {
position: absolute;
width: 20vw;
}
.image1 {
top: 18vh;
left: 27vw;
}
.image2 {
top: 30vh;
left: 50vw;
-webkit-transform: translateX(-50%);
transform: translateX(-50%)
}
.image3 {
top: 40vh;
right: 27vw;
}
Any help is really appreciated!
This will work if you want them overlapping but works best in an equal x and y view as shown on your example. If you do not want them overlapping, change the image size to 33.3 Let me know if I have understood your problem correctly.
If you want them to stay fixed then put them in a fixed size container and adjust the image size accordingly, there is enough for you to play around with hopefully.
The images have been placed inside DIVs as it makes positioning easier I think anyway.
body {
padding:0;
margin:0;
background: #ffb6b6;
}
#homepage {
height: 100vh;
width: 100vw;
background: #ffb6b6;
display:flex;
align-items:center;
justify-content:center;
}
.image {
width: 50vw;
height: auto;
}
.image1 {
position:absolute;
z-index:1;
top: 0;
left:0;
}
.image2 {
position: absolute;
z-index:1;
display:flex;
align-items:center;
justify-content:center;
}
.image3 {
position:absolute;
z-index:3;
bottom:0;
right:0;
}
<div id="homepage">
<div class='image1'><img src='https://randomuser.me/api/portraits/med/men/41.jpg' alt="blah" class='image'/></div>
<div class='image2'><img src='https://randomuser.me/api/portraits/med/men/42.jpg' alt="blah" class='image'/></div>
<div class='image3'><img src='https://randomuser.me/api/portraits/med/men/43.jpg' alt="blah" class='image'/></div>
</div>
How to crop the top of an image has already been described in this question. However, I am trying to crop an image by a percentage when the image dimensions are not known ahead of time. The container's resulting height should then be dependent on the size of the image.
Using the following, I can crop the top of an image, but it requires manually specifying the amount of the image to show in pixels. Is there a way I can specify I want to crop the top 10% of the image without knowing the image size ahead of time?
.container {
overflow: hidden;
position: relative;
height: 370px;
}
.container img {
position: absolute;
margin-left: auto;
margin-right: auto;
bottom: 0;
left: 0;
right: 0;
}
<div class="container">
<img class="img" src="http://placekitten.com/400/500" />
</div>
Here is an idea that rely on scale. You keep the image in-flow (don't use position:absolute) then you scale the container by 0.9 which is 90% of the total height then you scale the image by 1.1 to keep it's original size. This will trim the image by 10% but since transform is only a visual effect you may have space at the top or the bottom of the container (based on the transform-origin)
.container {
overflow: hidden;
outline:1px solid red;
display:inline-block;
}
.container img {
display:block;
}
.cut {
transform:scaleY(0.9);
transform-origin:top; /* The extra space will be on the bottom*/
}
.cut img {
transform:scaleY(1.1);
transform-origin:bottom; /* This should be bottom to cut the top*/
}
<div class="container">
<img class="img" src="http://placekitten.com/300/200" >
</div>
<div class="container cut">
<img class="img" src="http://placekitten.com/300/200" >
</div>
To be more precise we can consider calc() like below:
.container {
overflow: hidden;
outline:1px solid red;
display:inline-block;
}
.container img {
display:block;
}
.cut {
transform:scaleY(0.9);
transform-origin:top; /* The extra space will be on the bottom*/
}
.cut img {
transform:scaleY(calc(1/0.9));
transform-origin:bottom; /* This should be bottom to cut the top*/
}
<div class="container">
<img class="img" src="http://placekitten.com/300/200" >
</div>
<div class="container cut">
<img class="img" src="http://placekitten.com/300/200" >
</div>
I think the best approach to this without Javascript would be to translate the image up a certain percent, then scale it to fill the original height of the container. Anything else will leave a gap at the bottom.
.img_container img {
transform: translateY(-50%) scale(2);
}
https://jsfiddle.net/amoliski/n4ojdzyr/
This should do the trick, using translateY (got that from How can I get the height of an element using css only)
As you can see, the .container does not have a hardcoded height, however, it will load with the original image height, which is 500px, even though the image is loading as 450px (500px - 10%)
.container {
overflow: hidden;
position: relative;
}
.container img {
margin-left: auto;
margin-right: auto;
bottom: 0;
left: 0;
right: 0;
transform: translateY(-10%);
}
<div class="container">
<img class="img" src="http://placekitten.com/400/500" />
</div>
You can do this with a little bit of JavaScript (I've inlined it for simplicity's sake but you could move it to it's own function)
<div class="container">
<img class="img" src="http://placekitten.com/400/500" onload="javascript:this.parentElement.style.height = (this.height * 0.9)+'px';" />
</div>
Here's a working JSfiddle.
An alternative would be to use the top CSS property in a negative fashion on a relative image like the snippet below. This works for an image of an arbitary width and height. Just adjust your top value, accordingly.
html,body{ height:100%; margin:0; padding:0; }
.container {
overflow: hidden;
position: relative;
height: 100%;
width: 100%;
display:flex;
margin-bottom: -10%;
align-items:center;
justify-content:center;
}
.container img {
position: relative;
bottom: 0;
left: 0;
height: 100%;
top: -10%;
right: 0;
}
<div class="container">
<img class="img" src="http://placekitten.com/400/500" />
</div>
To remove the extra bottom margin, just subtract the margin-bottom equal to the amount you subtracted from the top. Here it is margin-bottom: -10%;
Adjust the top value according to your dynamic images. Also note, I added height:100% to your container so you can see the full image but the top part is cropped. I used flex for centering. Test for another image but this time, it is cropped 50% from the top
html,body{ height:100%; margin:0; padding:0; }
.container {
overflow: hidden;
position: relative;
height: 100%;
width: 100%;
margin-bottom: -50%;
display:flex;
align-items:center;
justify-content:center;
}
.container img {
position: relative;
bottom: 0;
left: 0;
height: 100%;
top: -50%;
right: 0;
}
<div class="container">
<img class="img" src="https://www.fujifilm.com/products/digital_cameras/x/fujifilm_x_t3/sample_images/img/index/ff_x_t3_002.JPG" />
</div>
I have looked all over the web for this answer but it seems to me that in order to horizontally center an image in div with absolute position, I need to know the dimensions of the image, but it's dynamic.
Here is my html:
<header>
<div id="elogo">
<img src="http://www.ftiweb.com/images/eStore/eStore_wht50.png">
</div>
<div id="nav">TOUR | MENU</div>
</header>
<div id="content">
<img class="ipad" src="http://ftiweb.com/images/eStore/Ipad_hand.png">
</div>
<footer>
<div id="foot">© FTIeStore 2013 • Privacy Policy</div>
</footer>
and here is the .css I'm using:
#content {
width: 70%;
height: 80%;
border: 1px solid red;
position: absolute;
bottom: 0px;
left: 50%;
margin-left: -35%;
display: table-cell;
img.ipad {
max-width: 100%;
max-height: 100%;
position: absolute;
bottom: 0px;
display: block;
}
The goal is just to have the image stay at the bottom/center of the page and re-size to fit the browser window. If I'm over-complicating this, please feel free to suggest an alternative.
Here is a link to a js.fiddle:
bottom-centered img - js.fiddle
If you want it to be absolute position do it like this:
http://jsbin.com/aveped/1/edit
img {
width:20%;
display:block;
position:absolute;
left:0;
right:0;
bottom:0;
margin:auto;
}
The parent needs to have position relative, or it will be positioned against the body.
You dont need width for this, I just included width because my image is so big.
left = center position - half the width of the image
img {
position: absolute;
bottom: 0;
left: 50%; /*half the container width*/
margin-left: -250px; /*half the width of the image*/
}
I attached a drawing of what my page looks like. The page has a width of 980px and the image has a width of almost 1200px. What I want to achieve is to have the page centered and to show as much of the image as possible while also keeping the image centered. I tried to absolutely position the image but then on mobile devices the browser page is set to the width of the image and the content does not stay centered.
Basically, there could be screens where not the entire image is shown to the user but only as much as fits the screen.
CSS:
.page_container {
width: 980px;
margin: 0 auto;
}
.image {
position: absolute;
left: 0;
right: 0;
}
HTML:
<body>
<div class="page_container">...</div>
<div class="image"><img .../></div>
<div class="page_container">...</div>
</body>
pls use the position: relative for the image.like this:
<div class="page_container">...</div>
<div class="image"><img src="http://g.hiphotos.baidu.com/album/w%3D210%3Bq%3D75/sign=3584477cf636afc30e0c386483229af9/caef76094b36acaf18169c407dd98d1000e99c93.jpg" width=1200 height=200 /></div>
<div class="page_container">...</div>
css code:
.page_container {
width: 980px;
margin: 0 auto;
background: orange;
}
.image {
position: relative;
left: 50%;
margin-left: -600px;
}
the margin-left is equal to the img's width/2. pls view the demo.
You Can Try This
<div class="popup">
<div class="wrapper">
<img src="http://farm4.staticflickr.com/3721/8826906676_501192b1c4.jpg">
</div>
</div>
CSS:
.popup{
position:fixed;
left:50%;
}
.popup .wrapper{
position:relative;
left:-50%;
/*popup-styles*/
background-color:#fff;
padding:10px;
border:solid 2px #444;
border-radius:10px;
}
html{background-color:#aaa;}
Example : jsfiddle
by Elad Shechter
.image {
position:absolute;
left:50%;
margin-left:-600px; // half of image width
}
You can try this way:
HTML:
<div class="wrapper">
<div class="image">
<img src="img/img.jpg">
</div>
</div>
JS:
<script>
$(document).ready(function() {
$('div.image').each(function() {
var imageSrc = $(this).find('img').attr('src');
$(this).css('background', 'url(' + imageSrc + ') center top no-repeat');
});
});
</script>
CSS:
.wrapper {
float: left;
width: 100%;
overflow: hidden;
}
.wrapper .image img {
visibility: hidden;
}
Easy way to center <img /> tag.
body {
margin: 0;
}
.warpper img {
display: block;
width: 100vw;
height: 100vh;
object-fit: cover
}
<div class="warpper">
<img src="https://i.stack.imgur.com/gkOwi.jpg" />
</div>
How about this: https://jsfiddle.net/squadjot/hva34oju/
HTML:
<div id="imgwrap">
<img src="https://i.stack.imgur.com/gkOwi.jpg">
</div>
CSS:
#imgwrap {
text-align:center;
}
#imgwrap img {
margin:0 -1000%; /* don't ask :P */
}
Works in every browser i've tried. IE, Chrome, Opera, FF
background-size:auto;
set this property for your image
Try this:-
.image {
position: absolute;
left: -50%;
}
I think it will work for bigger images...
.image {
position: absolute;
left: -50%; }
The div tag has a background image and i wanna put the overlay on the main tag's background-image and the rest of contents over both of them. But The following code will put the overlay tag over the conent.
HTML:
<div id="nav-section">
<div class="overlay"></div>
<div class="container">
<p>test</p>
<h5>test</h5>
</div>
</div>
CSS:
#nav-section{
background-image: url('../img/1.jpg');
background-position: top center;
background-size: cover;
position: relative;
}
#nav-section .overlay{
position: absolute;
top: 0;
height: 100%;
width:100%;
background-color: rgba(0,0,0,0.9);
z-index: 1;
}
#nav-section .container{
height: 600px;
}
#nav-section .container ul li{
float: left;
}
Thanks in advance.
Make the #nav-section .container have an position relative or absolute with a z-index that is higher than the overlay.
use z-index.
give #nav-section .container z-index that is higher then the div you want him to over lay.