I have 2 images of identical size that need to overlap perfectly and remain overlapped while the window re-sizes. For some reason, setting position: absolute; reverses the centering.
Here is the code so far, i've replaced my images with generic ones found on google images.
<img src = "http://www.brittlestar.org.uk/wp-content/uploads/2014/02/300x300.gif" width = 50% height = auto style="position: relative; margin-left: auto; margin-right: auto; display: block;">
<img src = "https://www.leadheroes.com/wp-content/uploads/superforms/2018/07/883153652/5361c9b53077aa52c50fa005b15c6c4f%20(2)-300x300.png" width = 50% height = auto style = "position: absolute; z-index: 2; top: 50%; margin-left: auto; margin-right: auto; display: block;">
Does anyone know how to fix this?
Thanks.
You have to use a container box that contains your two images and add position: relative to that box. Also you can use flex to center the content of the box. Finally add position: absolute to the image you want to overlap. Here is an example:
.container {
width: 50%;
display: flex;
position: relative;
margin: 0 auto;
align-items: center;
justify-content: center;
}
.container img {
width: 100%;
}
.container img.overlap {
position: absolute;
}
<div class="container">
<img src="https://dummyimage.com/300x300/c9c9c9/fff">
<img class="overlap" src="https://www.leadheroes.com/wp-content/uploads/superforms/2018/07/883153652/5361c9b53077aa52c50fa005b15c6c4f%20(2)-300x300.png">
</div>
I hope this is what u are looking for :)
Note: Please take the time to read https://stackoverflow.com/help/how-to-ask, people here cannot help you if you do not provide any code
html, body {
height: 100%;
}
div {
top: 50%;
position: relative;
margin-left: auto;
margin-right: auto;
width: 300px;
transform: translateY(-50%);
}
img {
max-width: 100%;
}
.overlap {
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
<div>
<img src="https://via.placeholder.com/300x300">
<img class="overlap" src="https://www.leadheroes.com/wp-content/uploads/superforms/2018/07/883153652/5361c9b53077aa52c50fa005b15c6c4f%20(2)-300x300.png">
</div>
You can keep one image as div background and another as content of the div
HTML
.imageCont{background: url('http://www.brittlestar.org.uk/wp-content/uploads/2014/02/300x300.gif') center no-repeat; width:300px; height:300px;display:flex; align-items:center;justify-content: center;}
<div class="imageCont">
<img src ="https://via.placeholder.com/300x300"/>
</div>
Let me know if this suits for you.
Based on the codes provided by you, you can use the code below to achieve the desired output.
<div>
<img src="http://www.brittlestar.org.uk/wp-content/uploads/2014/02/300x300.gif" style="position: relative; margin-left: auto; margin-right: auto; display: block;">
<img src="https://www.leadheroes.com/wp-content/uploads/superforms/2018/07/883153652/5361c9b53077aa52c50fa005b15c6c4f%20(2)-300x300.png" style="position: absolute;top: 0;left: calc(50% - 150px);">
</div>
Related
Beginner in CSS here.
Basically, what I am trying to do is to place check marks or X-es on top of a country map and I am trying to find the best way to do this.(open to learn JS for this)
So far, I have placed my map in a div and centered it, with HTML code <img src="check mark"> after the map image.
I will do this for every check mark i have to add, but is it there any better solution ?
.container {
margin-left: 10%;
width: 75%;
height: 80%;
display: flex;
justify-content: center;
}
.child {
position: relative;
margin: 0 auto;
}
.check {
position: absolute;
top: 300px;
right: 500px;
}
<div class="container">
<div class="child">
<img src="Map_image.png">
</div>
</div>
This is an example of what i want to achieve:
https://imgur.com/a/mu5WpuN
Short answer is create a wrapper div with position: relative and place the map and the Xes inside it. Then make map fit with the wrapper (i.e. 100% width and height or whatever) then make all Xes position: absolute and position them accordingly using top: left: right: bottom: properties
Here's a working sample. Try to run it.
.wrapper {
position: relative;
width: 100%;
}
img.map {
width: 100%;
}
img.marker {
position: absolute;
width: 20px;
}
.marker.x1 {
top: 20px;
left: 50px;
}
.marker.x2 {
top: 50px;
left: 190px;
}
<div class="wrapper">
<img class="map" src="https://www.onlygfx.com/wp-content/uploads/2015/12/world-map-vector.png" alt="map">
<img class="marker x1" src="https://i.pinimg.com/474x/b1/7e/59/b17e59bc32383f7878c9132081f37c60.jpg" alt="x1">
<img class="marker x2" src="https://i.pinimg.com/474x/b1/7e/59/b17e59bc32383f7878c9132081f37c60.jpg" alt="x1">
</div>
In the shopping, cart images need to center vertically in thumbnails.
I tried html
<a class="productselect-image" href="/Details/131631?lang=et">
<img src="/Image/Product?product=131631&size=228">
</a>
CSS:
.productselect-image {
height: 260px;
position: relative;
display: block;
overflow: hidden;
vertical-align: middle;
}
.productselect-image img {
vertical-align: middle;
}
But the image will appear at the bottom. How to center in vertically as pointed by reading arrow:
short images appear in bottom and cart looks ugly. How to make it nicer?
Bootstrap 3 and ASP.NET MVC4 are used.
.productselect-image{
display: flex;
justify-content: center;
align-items: center;
}
How about using display:flex?
It's my output
If you know your height you can use line-height to be the same as height, else go with display: flex;. Also use a max-width and max-height to keep your images in inside the productselect-image
.productselect-image {
height: 260px;
line-height: 260px;
position: relative;
display: block;
overflow: hidden;
}
.productselect-image img {
max-width: 100%;
max-height: 100%;
}
Since the image parent is already positioned relative you can just add this to the image css
.productselect-image img {
position: absolute;
top: 50%;
left: 0;
right: 0;
margin: 0 auto;
transform: translateY(-50%);
max-width: 100%;
}
This is the most standard way of centering things vertically.
try using bootstrap
the code is something like this
<div class="thumbnail" style="width: XXpx; height: YYpx">
<div class="thumbnail_wrapper">
<img src="#"/>
</div>
</div>
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.
I have a parent div that contains two children, side by side. The first child is an image that must be height 100% and 58% width, margin auto and overflow hidden. The second child contains text, and the length of the text determines the height of the parent. This is a template for several pages, with different length of text, and therefore different parent height. Is it possible to do what I'm trying to do without using JS? Thanks for your input! Code below.
HTML:
<div id="product-summary">
<div class="product-image-container">
<img />
</div>
<div id="product-details">
<h3 class="product-title"></h3>
<div class="product-description"></div>
</div>
</div>
CSS:
.product-image-container {
position: absolute;
top: 0;
left: 0;
width: 58%;
height: 100%;
overflow: hidden;
img {
position: absolute;
top: 0;
left: 50%;
margin: auto;
transform: translateX(-50%);
min-width: 100%;
height: 100%;
}
}
#product-details {
float: right;
border: solid thin #777;
height: ~"calc(100% - 2px)";
width: 41%;
text-align: center;
}
The problem is your #product-details is floated, which creates a new BFM (block formatting context), and the parent gets collapsed.
I suggest you read more about BFMs here: http://yuiblog.com/blog/2010/05/19/css-101-block-formatting-contexts/
There are several ways to fix this:
You could clear the parent, a way to do that is by adding overflow: hidden; to the #product-summary element.
You could remove the float: right from #product-details, and use flexbox to align it instead.
I don't know any preprocessor wizardry, but using inline-block works good, as well as keeping positioned absolute elements wrapped in a relative parent for control. It wasn't mentioned how the image is displayed, so I assume aspect ratio unchanged and no cropping.
SNIPPET
.product-image-container {
display: inline-block;
position: relative;
top: 0;
left: 0;
right: 0;
width: 58%;
height: 100vh;
overflow: hidden;
}
img {
display: inline-block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: auto;
}
#product-details {
float: right;
border: 1px solid #777;
height: 100%;
width: 41%;
text-align: center;
}
a {
margin-left: 50%;
}
<div id="product-summary">
<div class="product-image-container">
<img src='https://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png'>
</div>
<div id="product-details">
<h3 class="product-title">Lena Söderberg</h3>
<div class="product-description">
<blockquote>Lenna or Lena is the name given to a standard test image widely used in the field of image processing since 1973. It is a picture of Lena Söderberg, shot by photographer Dwight Hooker, cropped from the centerfold of the November 1972 issue of Playboy
magazine.
</blockquote>
<a href='https://en.wikipedia.org/wiki/Lenna'>Wikipedia</a>
</div>
</div>
</div>
Problem:
I'm trying to make a scalable view for images in a lightbox. I've got a way to make it look good on every size of screen. But, only Google Chrome's behavior to this method is different from the other browsers.
HTML:
<div class="parent">
<span class="helper"></span>
<img src="">
</div>
CSS:
I create a helper element, setting it's display to inline-block and change the vertical-align to middle for both span and img. This makes sure the image will be placed in the middle of it's parent.
To make sure the height and width of the image won't be any bigger than it's parent, I set it both to 90%. (not 100% 'cause I want some padding as well).
So my CSS looks like this:
.parent{
position: absolute;
top: 0;
right: 0;
bottom: 100px;
left: 0;
background-color: #ccc;
text-align: center;
}
.helper{
display: inline-block;
vertical-align: middle;
height: 100%;
}
img{
vertical-align: middle;
max-width: 90%;
max-height: 90%;
}
Fiddle
In this fiddle you can see that it work's in all browsers except for Google Chrome. Chrome ignores the maximum height that's set. Which will allow the image to be bigger than it's parent, not good..
Is there a work-around for this problem?
check this out with pure css , no js/jquery. just you need to wrap your content in div and give height 100% to it, as when you say max-height: 80% it takes 80% of it's parent which was not there.
.parent{
position: absolute;
top: 0;
right: 0;
bottom: 100px;
left: 0;
background-color: #ccc;
text-align: center;
}
.helper{
display: inline-block;
vertical-align: middle;
height: 100%;
}
img{
vertical-align: middle;
max-width: 90%;
max-height: 80%;
}
<div id = "parentDiv" class="parent">
<div style="height: 100%;">
<span class="helper"></span>
<img id = "imgId" src="http://3d-diva.davidmichaeldesigns.com/images/tree-01.png"/>
</div>
</div>
Hope this is what you are looking for :)
you can pass height to image tag dynamically with respect to parents div through javascript.
function setImgHt(){
var imgHeight = document.getElementById('parentDiv').clientHeight;
document.getElementById('imgId').setAttribute("style","height:"+imgHeight+"px");
}
.parent{
position: absolute;
top: 0;
right: 0;
bottom: 100px;
left: 0;
background-color: #ccc;
text-align: center;
}
.helper{
display: inline-block;
vertical-align: middle;
height: 100%;
}
img{
vertical-align: middle;
max-width: 90%;
max-height: 80%;
}
<body onload="setImgHt()">
<div id = "parentDiv" class="parent">
<span class="helper"></span>
<img id = "imgId" src="http://3d-diva.davidmichaeldesigns.com/images/tree-01.png"/>
</div>
</body>
it can be done through jquery as well on document ready call the function which is being called onLoad now.