No matter what I try, I cannot manage to find the proper CSS for the behaviour below:
A: Larger-than-window images show the upper left of the image and allow scrolling to see the rest of it.
(Important: the parent's DIV background is covered, but should be visible on images with transparency — even if you scroll.)
B: Smaller-than-window images are horizontally and vertically centered, the parent DIV covers the whole window.
Thanks for any help!
In order to center the smaller image inside the parent div, you can use display:flex for the parent div. Then set the justify-content and align-items to center. Here is a workaround,
#mydiv {
overflow: auto;
max-width: 500px;
max-height:500px;
}
.mainContainer{
width:500px;
height:500px;
background-color:#000;
display: flex;
justify-content: center;
align-items: center;
background-size:cover;
}
Replace the small image with this to check how it works with a large image.
<div class="mainContainer">
<div id='mydiv'>
<img src='https://i1.wp.com/www.rceshop.com/wp-content/uploads/2016/12/samples.png?fit=480%2C400' />
</div>
</div>
PS: Change the width and height of the parent div to the required screen size of yours. Hope this will help!
The line-height property turned out to be the base for solving the problem. Not sure if this is a hack, but it works.
.mainContainer {
text-align: center;
}
#mydiv {
line-height: 100vH;
margin: 0;
}
img {
vertical-align: middle;
}
Related
I need to fit an image into a fixed width/height div (say 80%/80%), but I also need the image to be wrapped in another div so that I can place an absolutely positioned element on top of the image (using that wrapper div as the anchor). I have accomplished the first point by just setting the max-height and max-width of the image to 100% so that it will always take up 100% of one dimension and won't exceed the other while maintaining aspect ratio, but I am unable to figure out a way to wrap the image in a div such that there is no extra space in the wrapper. I was under the impression that using display: inline or display: inline-block on the .wrapper div should shrink to the size of it's content (the image in my case), but that does not appear to be the case. When I replace the image with a test div with a defined width and height, the wrapper works as expected, i.e. there is no excess yellow background from the wrapper, it is exactly the same size as the div. How can I achieve the same behavior with the image? I've tried using all sorts of combinations of different display modes (flexbox/inline/block) and various min/max heights/widths but none have worked.
I've put an example of what my HTML looks like now, and what I would like it to look like if I could get this to work below. The .window element is a stand in for whatever the parent of the container is. The .container element is where I'd like to fit the image. In the example with the image, the inline wrapper is still larger than the image (which can be seen by the yellow overflowing on the sides). In the example after that with just a fixed size div (colored green), the wrapped properly shrinks to exactly the size of the div. Can this be accomplished with just css without knowing anything about the size of the image itself?
.window {
height: 400px;
width: 600px;
display: flex;
justify-content: center;
align-items: center;
background: red;
}
.container {
height: 80%;
width: 80%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: blue;
}
.wrapper {
display: inline;
max-height: 100%;
max-width: 100%;
background: yellow;
}
img {
max-height: 100%;
max-width: 100%;
}
.test {
width: 64px;
height: 128px;
background: green;
}
<div class='window'>
<div class='container'>
<div class='wrapper'>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/0b/ReceiptSwiss.jpg/1920px-ReceiptSwiss.jpg" />
</div>
</div>
</div>
<div class='window'>
<div class='container'>
<div class='wrapper'>
<div class='test' />
</div>
</div>
Easy problem: Centering an img within a div:
I have div with a given width and height, and an img with an unknown width and height within the div:
<style>
div {
width: ...;
height: ...;
}
</style>
<div>
<img src="...">
</div>
Centering the img while keeping it contained is easy:
div {
display: flex;
align-items: center;
justify-content: center;
}
img {
max-width: 100%;
max-height: 100%;
}
Here's a couple examples of centering a 500x300 img using this approach:
In a 400x200 div: https://jsfiddle.net/thejonwithnoh/f9evLpx0/
In a 200x400 div: https://jsfiddle.net/thejonwithnoh/9dndr9r8/
Hard problem: Centering an img within an a within a div
I have div with a given width and height, and an img with an unknown width and height within an a within the div :
<style>
div {
width: ...;
height: ...;
}
</style>
<div>
<a href="...">
<img src="...">
</a>
</div>
A solution which gets pretty close is simply to style the a as such:
a {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
Here's a couple examples of centering a 500x300 img using this approach:
In an a in a 400x200 div: https://jsfiddle.net/thejonwithnoh/udo957d9/
In an a in a 200x400 div: https://jsfiddle.net/thejonwithnoh/k0nj571f/
The problem here is that the space outside of the img but within the div is now clickable as a link.
The question (tl;dr friendly)
How can I center an img (of unknown size) within a div (of known size), but also have the image be a link?
Edit for clarifications/requirements based on comments:
The answer should only be in html and css (i.e. no javascript)
The answer should not depend on any framework (though framework dependent answers are still interesting in their own right, and I would be curious to see them, but they are not allowed for the "accepted" answer)
The image should maintain its aspect ratio
The image should be contained by the div
If the image is bigger than the div in either dimension, then the image should be scaled so that it fits that dimension
Otherwise, if the image is not bigger than the div in either dimension, then the image should simply be its natural size centered within the div (though I'd be curious to see a solution where the image is scaled up to snugly fit within the div, but they are not allowed for the "accepted" answer)
The area outside the image and inside the div should not be part of the link
A simple way for centering an image (even it is wrapped by <a></a>) within a fixed width/height div container is this:
div {
width: 200px;
height: 150px;
line-height: 150px;
font-size: 0px;
background-color:red;
text-align: center;
}
img {
max-width:100%;
max-height:100%;
vertical-align: middle;
}
<div>
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAfQAAAEsCAMAAAACZbH6AAAAWlBMVEUAAAAAADMAAGYAAJkAAMwAAP8AKwAAKzMAK2YAK5kAK8wAK/8AVQAAVTMAVWYAVZkAVcwAVf8AgAAAgDMAgGYAgJkAgMwAgP8AqgAAqjMAqmYAqpkAqswAqv8nC+k5AAACr0lEQVR42u3VAQkAQAgEQYvYv6YlFIQbCyzcwH+VC7w+P41vDWNBNxZ0Y0EHAh0IdCDQgUDXgK4BXQO6BnQN6BrQNaBrQNeArgEdurGgGwu6saADgQ4EOhDoGtA1oGtA14CuAV0DugZ0Dega0DWgQzcWdGNBNxZ0INCBQAcCXQO6BnQN6BrQNaBrQNeArgFdA7oGdOjGgm4s6MaCDgQ6EOhAoAOBrgFdA7oGdA3oGtA1oGtA14CuAR26saAbC7qxoAOBDgQ6EOhAoGtA14CuAV0DugZ0Dega0DWga0DXMBZ0Y0E3FnQg0IFABwIdCHQN6BrQNaBr3KI75xLOs+hPNxZ0Y0EHAh0IdCDQgUDXgK4BXQO6BnQN6BrQNaBrQNeArgEdurGgGwu6saADgQ4EOhDoGtA1oGtA14CuAV0DugZ0Dega0DWgQzcWdGNBNxZ0INCBQAcCXQO6BnQN6BrQNaBrQNeArgFdA7oGdOjGgm4s6MaCDgQ6EOhAoAOBrgFdA7oGdA3oGtA1oGtA14CuAR26saAbC7qxoAOBDgQ6EOhAoGtA14CuAV0DugZ0Dega0DWga0CHbizoxoJuLOhAoAOBDgQ6EOga0DWga0DXgK6xi+6cSzjPoj/dWNCNBR0IdCDQgUAHAl0DugZ0Dega0DWga0DXgK4BXQO6BnToxoJuLOjGgg4EOhDoQKBrQNeArgFdA7oGdA3oGtA1oGtA14AO3VjQjQXdWNCBQAcCHQh0Dega0DWga0DXgK4BXQO6BnQN6BrQoRsLurGgGws6EOhAoAOBDgS6BnQN6BrQNaBrQNeArgFdA7oGdOjGgm4s6MaCDgQ6EOhAoAOBrgFdA7oGdA3oGtA1oGtA14CuAR26saAbC7qxoAOBDgQ6EOhAoGtA14CuAV0DusYuuou7AR87wv5XXaevAAAAAElFTkSuQmCC"/>
</div>
Setting the divs' ...
- line-height equal to its height combined with an image that has vertical-align set to center, centers the image vertically.
- text-align to center, centers the image horizontally.
I have two div elements which I want to center within an 'li' element. I found out that this could be done by using a flex layout. My parent div has the following properties:
display: -webkit-flex;
justify-content: center;
align-items: center;
This works and the two child divs are centering within the 'li'. Those are an image and a text element. But the additional behaviour this has, is not what I want. When the screen is too small for one line text, it is overriding the image. It looks like the following:
The more I shrink the page, the more the image dissappears. Does anybody know how this comes and how I can fix it?
EDIT Currently I am finding out how to add a working code snippet. For now, I have an image with the content structure, maybe this helps a bit.
I fill the image using the following css code:
.img_info_icon_png {
background: url("adapter-images.png") no-repeat -432px -0px;
width: 24px;
height: 24px;
}
Although the width is set to '24px', it is changing within the browser.
EDIT The following url is pointing to an example with the same behaviour: https://jsfiddle.net/Lkpxhux0/
As the flex-shrink defaults to 1, it allows for the items to shrink when not fit its parent.
Add flex-shrink: 0 to the .img_info_icon_png rule.
.outer {
display: flex;
justify-content: center;
align-items: center;
}
.outer .image {
background: url(http://placehold.it/50/f00) no-repeat;
width: 24px;
height: 24px;
flex-shrink: 0;
}
<div class="outer">
<div class="image"></div>
<div class="text">
This is some text that should not overlap the left aligned image
</div>
</div>
I have found numerous questions about relative positioning of images, yet they all rely on a parent DIV which fails in my case as you will see.
I also found various solutions for fixed ratio DIVs, those use padding-bottom leading to over-sized height in my case.
So here is my original situation (see e.g. https://www.giulietta-del-conte.com/). Essentially:
<body>
<img alt="Logo" width=1280 height=853 src="/img/GdC-Logo.jpg">
</body>
With:
img {
height:auto;
width:auto;
max-width:80%;
max-height:80%;
position: absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
-webkit-transform:translate(-50%,-50%);
}
Now I want to position a second image (a banner) exactly below the first image. The banner has same width and much smaller height.
I have tried creating a parent div, but that does not work out. I cannot get it to the exactly required size, so I can resized and position the two image. I tried to create it with the right width and combined height. Yet it will not properly resized using max-width and max-height (becomes disproportional).
It is fairly easy to create a version which allows resizing in either direction, but I fail to get a version which allows resizing in both directions and centers the combined block.
Any idea? I did not want to create a combined image as a map.
This is my first time here. So would be very grateful to know if the answer was the way you expected it to be.
Also do let me know if it wasn't the way you wanted. Thanks.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="new 1.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div>
<img id= "pic" alt="Logo" width="1280" height="853" src="https://www.giulietta-del-conte.com/img/GdC-Logo.jpg">
<img id="banner" src="https://www.giulietta-del-conte.com/img/Scope.jpg" alt="banner" width="1280" height="200px">
</div>
</body>
</html>
CSS:
#pic {
display: block;
width: 100%;
height: 100%;
}
#banner {
display: block;
width: 100%;
height: 10%;
}
div {
height:911px;
width:1280px;
max-width:80%;
max-height:80%;
position:absolute;
top:46%;
left:50%;
transform:translate(-50%,-50%);
-webkit-transform:translate(-50%,-50%);
}
OK, here is a hack. I changed the banner have the joint size of both pictures. Then I can correctly resize and center it. It remains to properly position the main (original) picture. Done. Solution visible on https://www.giulietta-del-conte.com/.
I don't think this is possible to do without using parent divs for centering. However it is possible to achieve the effect with a combination of flex and "normal" css. Here's a working example.
You'll need a horizontally centered flex container (.centered in this example) that takes up 100% of the browser height. Nested in the flex container, add a non flex div (eg display: block). Because the non flex div is the sole item of the flex layout, it will be centered horizontally and vertically, while allowing you to create a separate non flex layout of elements inside it.
Now as long as the images have max-width set to 100% (no height specified) their proportions will be preserved whatever the width of their parent elements may be. Granted, I haven't done anything to limit vertical overflowing, but as long as the image proportions aren't crazy, this might be worth a try.
/* For demo purposes */
* { margin: 0; padding: 0; }
.centered {
display: flex;
height: 100vh; /* Needed for vertical centering */
align-items: center; /* Flex - vertical centering */
margin: 0 auto; /* Horizontally center the layout */
justify-content: center; /* Flex - horizontal centering of content */
text-align: center; /* Keep images centered in the event of layout width exceeding image width */
max-width: 60%; /* For demo purposes */
background: #eee; /* For demo purposes */
}
/* Nested non flex container allows you to create a separate layout inside the flex container */
.centered div {
display: block;
padding: 10px;
}
img {
max-width: 100%;
margin: 5px 0;
}
<div class="centered">
<div>
<img src="http://placehold.it/1000x500">
<img src="http://placehold.it/1000x200">
</div>
</div>
I'm having a bit of a struggle here with positioning an image inside a div.
The div is fixed to 219x197px but images are loaded with wordpress and I need to proof it so that even if the image is smaller or larger than that, it will be centered and with overflow hidden if larger and either stretched or centered if smaller (what happens when its smaller doesn't really matter).
I do not want to resize the image, I just want to show it centered and whatever fits on the div shown while the rest is hidden with overflow.
I found another question around with which I managed to center it horizontally, but I cannot do it vertically.
I tried some margin-left with percentage but it is not constant with different image sizes.
I also tried some stuff with line-height and vertical-align but nothing seems to work properly.
Does anyone know anything I could try? Thanks in advance!
Here's the HTML and CSS as it works to center horizontally:
<div class="img_article">
<span>
<?php get_post_image($post->ID,'large'); ?>
</span>
</div>
.img_article {
border-bottom: 1px solid #EF5589;
overflow: hidden;
width: 219px;
height: 197px;
text-align: center;
}
.img_article > span {
display: block;
width: 1000px;
height: 1000px;
margin-left: -390px; /* -(width-container width)/2 */
}
.img_article > span > img {
display: inline-block;
}
I don't know what you tried with line-height and vertical-align, but it should be working.
.img-hold { height: 200px; line-height: 200px; text-align: center; }
.img-hold img { verticale-align: middle; }
Demo