I have two images which need to be over each other. The images have to also be responsive and therefore have a percentage width and height.
<div class="container">
<img src="res/bigger.png/>
<img src="res/smaller.png class="icon"/>
</div>
.container {
width:100%;
height:100%;
background-color:blue;
postion:relative;
}
.container img {
max-width:100%;
max-heihgt: 100%;
height: auto;
width: auto;
}
.icon {
position: relative;
top: -70%;
left: 20%;
z-index: 50;
width: 10% !important;
height: auto !important;
}
As the two images do not have the same proportions when re-sized the smaller image which is on top of the bigger image will lose its position relative to the bigger image. How could I maintain the position of the smaller image relative to the bigger image when I re-size the page?
An example of this problem could be found here http://jsfiddle.net/5YQFV/
How about, instead of using two images you would replace the largest image with a container like this
<div class="the-gang">
<img src="res/smaller.png" />
</div>
And then set the position of the container to position:relative but the position of the smaller image to position:absolute like this
.the-gang{
position:relative;
width:100px;
height:75px;
}
.the-gang img{
position:absolute;
top:10px;
left:10px;
}
This way the smallest image will always stay where you place it, as the absolute position will be relative to it's container.
The possible disadvantage is that you have to set minimal height and width of the parent container, but the advantage is that it will be done purely in CSS and no javascript will have to be used.
Related
I've found a lot of answers to this question, but none (that I can find) apply to my particular situation.
I have an image in a div that I would like to scale with the width of the page. However, my image is much larger than what you actually see, as I'm using object-fit: cover and object-position to fit it to the container. I can't find a solution that keeps the image the same while scaling the container (and therefore image) down.
In other words, I would like the container and image to scale and have the image look the exactly the same. All the solutions I've found move the image around inside the container when the page width is changed.
Edit for clarity: Imagine there's a dot at the very center of the image, and normally that dot is in the very center of the container. In my case (because of object-position I think), the dot moves vertically when the width of the page is changed. I need some way to scale the container down to keep the dot in the same place.
Edit 2: Figured it out. Setting the height of the container via vw (viewport width) does exactly what I'm looking for. e.g. height: 10vw;
Here's the CSS I have at the moment:
.container {
height: 25%; /* This would need to be removed/changed I assume.*/
}
.image {
height: 100%;
width: 100%;
object-fit: cover;
object-position: 100% 80%;
}
My container is the full width of the page.
This seems so obvious to me, I think I didn't get your point.
Is this what you want ? This snippet shows that no matter the size of the picture, it will fit into the container.
EDIT Your issue is that your image isn't centered in your container. To do that, you have several options. Here is one using a relative position with a transform. You could also use flexboxes, which are, in my opinion, much better.
.container {
width: 500px;
border: 1px solid darkcyan;
height: 600px;
}
img {
max-width: 100%;
height: auto;
position: relative;
top: 50%;
transform: translateY(-50%);
}
<div class="container">
<img src="https://placeholdit.co//i/500x250?&bg=cccccc&fc=000000&text=BIG IMAGE">
</div>
.image{
max-width: 100%;
}
<img src="https://wallpaperbrowse.com/media/images/750806.jpg" class="image" />
To have your image fill the width of it's container, you need the max-width property:
.image {
max-width: 100%;
}
Well, after a bit more digging I found the answer to my question. The solution was to use vw (viewport width) to set the height of my container.
In my case, using height: 10vw; on the container does exactly what I'm looking for. The value of that can be adjusted of course depending on how much space you want the container/image to take up.
You can use max-width: 100%; in style of the img.
But another way is to use your image as a background of your div with the following style:
.container {
background-image: url(https://maxoffsky.com/word/wp-content/uploads/2014/04/andreasbg.png);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
width:70%;
height:300px;
margin:0 auto;
}
<div class="container"><div>
Update:
You can run the following demo and change the size of it here
.container {
background-color: black;
width:70%;
margin:0 auto;
padding:20px;
position:relative;
}
img{
position:relative;
max-width:100%;
}
.dot{
background:yellow;
width:10px;
height:10px;
position:absolute;
left:50%;
top:50%;
transform: translate(-5px,-5px);
z-index:1;
border-radius:50%;
}
<div class="container">
<div class="dot"></div>
<img src="https://maxoffsky.com/word/wp-content/uploads/2014/04/andreasbg.png">
<div>
You can see the yellow dot always (any page sizes) in the center of image and center of the container:
Small page size:
Large page size
I want to set image in img tag, without cropping it or stretching it.
That is, the image ratio I have set is 1:1 but image may vary in aspect ratio, so I neither want to change the aspect ratio nor want to crop it vertically or horizontally. my images are changing dynamically.
I have checked multiple solutions for eg: This one which suggests either crop height or width. But I don't want both.
Currently I am at this:
HTML:
<div id="container">
<img id="imgHolder" />
</div>
and CSS
#container{
height: 100px;
width: 100px;
background-color: yellow;
overflow: hidden;
}
#imgHolder{
height: 100%;
/* OR width: 100%; */
}
Help. I prefer CSS only.
you can just set both the max-width and the max-height of your images
#container img {
max-width: 100%;
max-height: 100%;
}
Doing so the image won't be stretched since your not changing its width or height: whatever is the image size, setting the above properties together ensures that the longest side is reduced to the maximum width (or height) of its parent div, while the other one can freely adapt itself, keeping the original image ratio.
Example http://codepen.io/anon/pen/qEjLZa
Example with centered images (both ver. and hor.): http://codepen.io/anon/pen/NPgege
If you set a height and width on the parent container, it is hard to retain a perfect aspect ratio without stretching or cropping the image. If the image is the same size, 100px x 100px then you could use
CSS
#container{ position: relative; width: 100px; height: 100px; }
img{
position:absolute;
top:0px;
bottom:0px;
right:0px;
left:0px;
}
This will set the image to cover the parent container. You could also try
img {
background: url( yourimage.png) cetner no-repeat;
background-size: contain;
}
This will set the image to fill the larger of the dimensions to the parent container and will center it. The smaller dimension will not be covered, but it will retain is apsect ratio.
I am trying to figure out how to re-size an image so that it keeps it ratio of width to height, but gets re-sized until the height of the image matches the height of the containing div. I have these images that are pretty large and long (screenshots), and I want to put them into a 200px width, 180px height div for display and without re-sizing the images manually. To make this look good, the sides of the image need to overflow and be hidden with the containing div. This is what I have so far:
http://jsfiddle.net/f9krj/2/
HTML
<a class="image_container" href="http://www.skintype.ca/assets/background-x_large.jpg">
<img src="http://www.skintype.ca/assets/background-x_large.jpg" alt="" />
</a>
CSS
a.image_container {
background-color: #999;
width: 200px;
height: 180px;
display: inline-block;
overflow: hidden;
}
a.image_container img {
width: 100%;
}
As you can see, there is grey color showing on the images parent container which should not be shown at all. In order for that container to be filled completely, the width needs to be overflowed equally on both sides. Is this possible? Is it also possible to account for an image that is also too tall?
Original Answer:
If you are ready to opt for CSS3, you can use css3 translate property. Resize based on whatever is bigger. If your height is bigger and width is smaller than container, width will be stretch to 100% and height will be trimmed from both side. Same goes for larger width as well.
Your need, HTML:
<div class="img-wrap">
<img src="http://lorempixel.com/300/160/nature/" />
</div>
<div class="img-wrap">
<img src="http://lorempixel.com/300/200/nature/" />
</div>
<div class="img-wrap">
<img src="http://lorempixel.com/200/300/nature/" />
</div>
And CSS:
.img-wrap {
width: 200px;
height: 150px;
position: relative;
display: inline-block;
overflow: hidden;
margin: 0;
}
div > img {
display: block;
position: absolute;
top: 50%;
left: 50%;
min-height: 100%;
min-width: 100%;
transform: translate(-50%, -50%);
}
Voila! Working: http://jsfiddle.net/shekhardesigner/aYrhG/
Explanation
DIV is set to the relative position. This means all the child elements will get the starting coordinates (origins) from where this DIV starts.
The image is set as a BLOCK element, min-width/height both set to 100% means to resize the image no matter of its size to be the minimum of 100% of it's parent. min is the key. If by min-height, the image height exceeded the parent's height, no problem. It will look for if min-width and try to set the minimum height to be 100% of parents. Both goes vice-versa. This ensures there are no gaps around the div but image is always bit bigger and gets trimmed by overflow:hidden;
Now image, this is set to an absolute position with left:50% and top:50%. Means push the image 50% from the top and left making sure the origin is taken from DIV. Left/Top units are measured from the parent.
Magic moment:
transform: translate(-50%, -50%);
Now, this translate function of CSS3 transform property moves/repositions an element in question. This property deals with the applied element hence the values (x, y) OR (-50%, -50%) means to move the image negative left by 50% of image size and move to the negative top by 50% of image size.
Eg. if Image size was 200px × 150px, transform:translate(-50%, -50%) will calculated to translate(-100px, -75px). % unit helps when we have various size of image.
This is just a tricky way to figure out centroid of the image and the parent DIV and match them.
Apologies for taking too long to explain!
Resources to read more:
https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translate
https://css-tricks.com/centering-css-complete-guide/
Change your code:
a.image_container img {
width: 100%;
}
To this:
a.image_container img {
width: auto; // to maintain aspect ratio. You can use 100% if you don't care about that
height: 100%;
}
http://jsfiddle.net/f9krj/5/
Use max-width property of CSS, like this :
img{
max-width:100%;
}
you can use flex box for it.. this will solve your problem
.image-parent
{
height:33px;
display:flex;
}
If you take answer's Shekhar K. Sharma, and it almost work, you need also add to your this height: 1px; or this width: 1px; for must work.
For me the easiest way to do it without using position absolute, translate.
<div class="img-container">
<img src="yoururl" />
</div>
the CSS should look like this :
.img-container {
height:100px;
width:100px;
overflow:hidden;
}
.img-container > img {
width:100%;
height:100%;
object-fit:cover;
}
If all your trying to do is fill the div this might help someone else, if aspect ratio is not important, is responsive.
.img-fill > img {
min-height: 100%;
min-width: 100%;
}
I'm displaying some images on my page in Image Elements. However with different screen resolutions they move to different places on the page.
How should I write the below code so that my div/elements will remain absolutely positionned and won't change in different resolutions?
<div class='imageElement2'>
<a href='#' title=''><img alt='' height='364' src='http://farm8.staticflickr.com/7209/6978440877_10b1fcffc4_o.jpg' width='940'/></a>
</div>
<style>
.imageElement2 {
width:1020px; height:400px; overflow:auto;
position:absolute; z-index:2; left:50%; top:0%;
margin-left: -510px; margin-top:40px; text-align:center;
visibility:visible;}
</style>
Remove the
left: 50%; top: 0%;
and replace them with a fixed px levels like
left: 50px; top: 0px;
because 50% means the position at 50% of the width of the browser area.
So you see, on a 1024 screen the div will be at 512 and on a 1366 screen the div will be at 683.
HINT: Never use % if want an "absolute" positioning on any browser.
HINT: if you are trying to position the div in the middle of the screen just apply these styles
width: your-desired-width-on-any-browser px;
margin: auto; //to bring it middle
//additionally you can add "top: X px/%/em; to position it vertically.
Have a good day.
If I understand it correctly, the best way would be to make a wrapper div with at width and height, elements in this div will not be affected by changing page width, you will just get a scroll.
This should do the trick, just append it to a wrapper element.
.imageWrapper { width: 500px; }
However a screendump of what you want, would be great!
I have a gallery slider, with random images from the forum. So, the size is pretty random but the gallery(container frame) itself is fix sized. So, we decided to set the image height to a fixed size but the width is set to auto. This way, the image will not be squeezed inside the container if its ratio different is too much from the container ratio.
Then, I set the container's text-align to center in order to center the image. But, this only works for images smaller than the container. If the image is still bigger than the container (after resize), the image is aligned to the left instead.
The jsffidle example.
NOTE: Using background-image is not a solution because resizing background image currently is still not supported by many browsers (especially IE and some Chinese browsers).
Hope there is enough information here. So, how do I center the image in this situation?
I have found another solution
<style type="text/css">
.container {
width:600px; //set how much you want
overflow: hidden;
position: relative;
}
.containerSecond{
position: absolute;
top:0px;
left:-100%;
width:300%;
}
.image{
width: 800px; //your image size
}
</style>
and in body
<div class="container">
<div class="containerSecond">
<image src="..." class="" />
</div>
</div>
This will center your image whenever your container is bigger or smaller. In this case your image should be bigger than 300% of container to not be centered, but in that case you can make with of containerSecond bigger, and it will work
You would use max sizes:
img {
max-width: 200px;
max-height: 200px;
}
Take a look: http://jsfiddle.net/fabianhjr/zW6eh/
Edit: still having centring problems, I will get back to you on that.
I had similar problem, but the solution was about to crop right and left margin, while the image should be centered. Smaller images are stretched.
My solution is also in this JS Fiddle: http://jsfiddle.net/david_binda/9tTRQ/
HTML
<div class="thumb-wrapper">
<a href="" title="" class="img">
<img src="http://upload.wikimedia.org/wikipedia/commons/4/40/Tectonic_plate_boundaries.png" alt="" />
</a>
</div>
CSS
.thumb-wrapper{
width: 200px; // desired thumbnail width
height: 150px; // desired thumbnail height
overflow: hidden;
position: relative;
margin: 0 auto;
}
.thumb-wrapper .img{
display: block;
position: absolute;
width: 300px; // should be wider than final thumbnail
height: 150px; // desired thumbnail height
left: 50%;
margin-left: -150px; // half of above defined width eg. 300/2 = 150
}
.thumb-wrapper .img img{
width: auto !important;
max-width: 300px !important; // should be wider than final thumbnail
min-width: 200px !important; // desired width of thumbnail
height: 150px !important; // desired thumbnail height
margin: 0 auto;
display: block;
}
The solution that I've found is:
img{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);//You have to add all the prefixes
//of transform
}
div.container{
position:relative;
overflow:hidden;
}
Okay, I think this is your best solution.
You set your wrapper around each image to display: table; and then one more wrapper inside that with a display: table-row; and set your img's to display: table-cell
This way you can resize anyway you like while keeping the ratio.
http://jsfiddle.net/zW6eh/17/
You can also simply set your height: to 200px; This will keep your width auto by default.