This is my code (see fiddle here):
img {
width: 200px;
height: 200px;
}
.image-container {
width: 600px;
height: 200px;
overflow: hidden;
}
I have lots of images, all 200px squared, in an image-container. The overflowing images are hidden.
When I slide the images to the left, the left-most image disappears in a smooth fashion.
When I slide the images to the right, the right-most image does not disappear in a smooth fashion. Instead, it disappears in a flash.
Why is there a discrepancy between the left and right behaviour? How can I have a smooth animation on both sides?
What's because your image container isn't wide enough, and the images are dropping down to the next line but the overflow is hiding that.
See this jsFiddle example.
Wrap your image container in a wrapper with the CSS you currently have on your image container, and make your image container as wide as all your images combined (4000px for kicks in my example).
.image-container {
width: 4000px;
height: 200px;
}
#wrapper {
width: 600px;
height: 200px;
overflow: hidden;
}
I'd suggest white-space:nowrap
img {
width: 200px;
height: 200px;
}
.image-container {
white-space:nowrap;
height: 200px;
}
#wrapper {
width: 600px;
height: 200px;
overflow: hidden;
}
see demo here: http://jsfiddle.net/pavloschris/bsjnq/3/
Related
This is my html code
<div><img src="picture1.jpg" /></div>
<div><img src="picture2.jpg" /></div>
<div><img src="picture3.jpg" /></div>
My div containers have certain fixed dimensions:
div{
width: 400px;
height: 400px;
object-fit: cover;
overflow: hidden;
}
img{
height:100%;
width: 100%;
display: block;
}
And I want to show as much of the middle of the image as possible inside the div containers (and crop the rest of the image away). So depending on the dimension of the image I want either to crop a little bit left and right from the image or top and bottom. Such that the biggest square within the image is shown. This square shall be centered and of course scaled accordingly.
I tried a lot and read a lot of threads before. For example this one. The problem is that nothing works for me parallel for different image dimensions (keep in mind that I don't want to adapt the code for different images). I want one code for all!
The html code shall be as it is. Only the css shall be adapted to make it work (so I don't want to use background images). But I'm open for fancy state of the art CSS stuff. Use flex layout or whatever you want!
add object-fit: cover; to the image to fill the given size while not stretching the image. Also use height: 100%; width: 100%; to make sure that the image only take the given space.
The image will be centered by default.
img {
object-fit: cover;
width: 100%;
height: 100%;
}
/* for demonstration only */
div {
margin-bottom: 20px;
}
div:nth-of-type(1) {
width: 200px;
height: 50px;
}
div:nth-of-type(2) {
width: 200px;
height: 100px;
}
div:nth-of-type(3) {
width: 200px;
height: 200px;
}
<div><img src="https://www.tacoshy.de/Images/Yoshi/IMAG0735.jpg"></div>
<div><img src="https://www.tacoshy.de/Images/Yoshi/IMAG0735.jpg"></div>
<div><img src="https://www.tacoshy.de/Images/Yoshi/IMAG0735.jpg"></div>
My solution would be simple:
div {
width: 200px; /* or whatever size you need */
height: 200px; /* or whatever size you need */
position: relative;
overflow: hidden;
}
div img {
max-width: 100%;
height: auto;
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div><img src="https://via.placeholder.com/300x600.jpg"></div>
The bad part of this solution is if any of the images have a very different ratio. In this case, the combination of min-height (for example) with the same size of the div would be necessary.
I'd like to fill a div with an img, keeping aspect ratio and stretching either width or height as much as required to fit in.
<div style="width: 80px; height: 80px">
<img src="..." />
</div>
How could I achieve it? If the image is not quadratic, it must be "zoomed in" and either be scropped top-bottom or left-right, depending which side is the bigger one. Moreover the image should afterwards be centered, so that the corners get cut equally.
I tried (but no effect):
.thumb {
max-width:100%;
max-height:100%;
}
If I add additional width: 100%; height:100%;, the images fit perfectly, but are resized not keeping aspect ratio.
the following did the trick:
width:100%;
height:100%;
object-fit: cover;
overflow: hidden;
Using max-width, the image will be contained inside the div, there will be no overflow.
If you use min-width instead, the shorter side will be exactly 100% of the div while the other side can be longer.
To center the image, we can use translate and relative positioning.
The following code works.
div {
overflow: hidden;
}
.thumb {
min-width: 100%;
min-height: 100%;
transform: translate(-50%, -50%);
position: relative;
left: 50%;
top: 50%;
}
To keep an image's aspect ratio, just specify one dimension:
div {
width: 80px;
height: 80px;
border: 2px solid red;
overflow: hidden;
}
img {
height: 100%;
}
This will produce the following effect:
However, as you can see, the kitten is not central, but you can use Flex box to sort this out.
div {
width: 80px;
height: 80px;
border: 2px solid red;
justify-content: center;
display: flex;
flex-direction: row;
}
img {
flex: 1;
height: 100%;
}
.thumb {
max-width:100%;
height:auto;
}
Or ( to allow scale up and down, which will look pixelated if you scale up, where the above will only scale to the max size of the image )
.thumb {
width:100%;
height:auto;
}
Is what you are looking for.
More info on responsive images:
http://demosthenes.info/blog/586/CSS-Fluid-Image-Techniques-for-Responsive-Site-Design
http://www.w3schools.com/css/css_rwd_images.asp
Not sure if anyone still looking at this post. I came across this while I was looking for a way to fit a image into a < div > without getting the unwanted white space around the image, because I was using hover & stick-out effect.
I was inspired by Matt's solution.
Instead of
.thumb {
max-width:100%;
height:auto;}
I added
.thumb {
max-width:100%;
max-height:100%;
height:auto;}
Now my images fit in to the < div > perfectly without having those white space stick out with the image.
use background-size:cover
div{
background-image:url(http://placekitten.com.s3.amazonaws.com/homepage-samples/200/140.jpg);
background-size:cover;
}
<div style="width:80px;height:80px;"></div>
I am trying to build a digital restaurant menu… I designed it like a popup, so it sits in a fixed container on top of a gray transparent overlay. Since there are more dishes than fitting into this container, I wanted the container to be scrollable, which I achieved with overflow-y: scroll. At this point
it still worked perfectly.
But on the bottom of the container I wanted fixed footer with a white-to-transparent gradient containing a button to close the whole menu popup. Since the stuff that I thought of didn't work, I placed it inside of another container on top of the popup… Now it looks as I wanted it, but the menu in the background is not scrollable anymore.
I guess there must be another way… How can I place the container with the close button on the bottom of the menu container while still being able to scroll?
Here is a jsFiddle…
Your container for the button at the bottom is overlaying the scrollable container, so when you try and scroll the text, you're actually trying to scroll inside of the bottom-container as its over the top. I have made a JS fiddle, with an example of what you're trying to achieve.
https://jsfiddle.net/8ydb2h2m/
body {
background: #ccc;
}
.box {
width: 100%;
height: 100%;
max-width: 80%;
max-height: 80%;
left: 0;
top: 0;
margin: 5% 10%;
position: fixed;
background: #fff;
overflow: hidden;
}
.top-section {
height: 20%;
background: #c00;
}
.scroll-section {
height: 70%;
overflow-y: scroll;
}
.bottom-section {
height: 10%;
}
.button {
background: #c00;
height: 30px;
width: 100px;
margin: auto;
text-align: center;
}
I am trying to get a full width background or image behind floated items within a max-width container. The page will be responsive so I can't fix the height of the .item objects nor be sure how many will be shown on each row.
I'd like to have a background or image running full length of the window aligned to a position in the .item div. I can use a very long div or image offset to the left without any issue but the right side makes the browser scroll which I don't want.
.bg {
background: red;
bottom: 0;
height: 30px;
left: -1000px;
position: absolute;
width: 2000px;
z-index: 0;
}
Fiddle here: http://jsfiddle.net/K8uAh/4/
The red banner is my background, see how it runs off to the right.
Ideally I would do this just using CSS, I know if I have to go the JavaScript route it all gets a bit clunky on the window resize.
You can use the .container. If you don't want the container to extend the entire width you need to remove overflow: hidden; and add it to an additional wrapper div.
body {
width: 100%;
margin: 0;
}
.container {
overflow: hidden;
}
Hi I tried on your fiddle and altered the width and the left attribute to have percentage instead of px as if we are dealing with px then it will be hard to make it responsive.
Code:
.bg {
background: red;
bottom: 0;
height: 30px;
position: absolute;
width: 125%;
left:-16%;
z-index: 0;
}
Fiddle: http://jsfiddle.net/K8uAh/1/
You can use a clear-fix div at the end of .item.
body {
width: 100%
}
.container{
background: red; /* Change your color here */
margin: 0 auto;
width: 100%
overflow: hidden;
}
.item{
background: #999;
float: left;
margin: 10px 5%;
position: relative;
width: 40%;
}
Fiddle
First : your fiddle css is incorrect :
body {
width: 100%;
}
} /*<- extra closing braces here is ruining your layout*/
see what i mean
second : to have a full width bg use:
background: #ccc url('http://hdwallpaperia.com/wp-content/uploads/2013/11/Flower-Vintage-Background-640x400.jpg');
background-size :100% 100%;
container class should be :
.container {
background: #ccc url('http://hdwallpaperia.com/wp-content/uploads/2013/11/Flower-Vintage-Background-640x400.jpg');
background-size :100% 100%;
margin: 0 auto;
max-width: 300px;
overflow: hidden;
}
working demo
I want my images to resize as the window height changes while keeping the containing div shrink wrapping the image. I tried using:
<div>
<img src="http://akamaicovers.oreilly.com/images/9780596806767/cat.gif" alt="">
</div>
html, body {
height: 100%;
width: 100%;
}
div {
height: 90%;
background-color: black;
display: inline-block;
}
img {
height: 100%;
width: auto;
}
But it doesn't seem to work as expected. The div doesn't shrink. It actually does once I play around with the css properties in debugger.
Here is the fiddle (try resizing the result panel)
Update:
Now this is strange. Since I first posted this question the browser behaviour changed. Originally (Chrome) when I resized the window the image would shrink proportionally as expected but the wrapping div would keep its original width. What happens now (Chrome update?) is that the image doesn't shrink horizontally, and the div also.
I tried it with the latest Safari and Firefox. Both shrink the image but keep original div width. So please be kind to check your solutions on other browsers as well.
Update #2:
The div has to stay of block type as I need to place other elements in the corners of the image.
I guess you'll have to resort to JavaScript:
$(window).on('resize', function (){
$('div').width($('img').width());
});
JSFIDDLE
You just have to keep your image max-height to be 100%. Thats it.
Here is the Working Solution
The HTML:
<div>
<img src="http://akamaicovers.oreilly.com/images/9780596806767/cat.gif" alt="">
</div>
The CSS:
html, body {
height: 100%;
width: 100%;
}
div {
height: 90%;
background-color: black;
display: inline;
}
img {
max-height: 100%;
max-width: 100%;
height: 100%;
}
EDIT
Updated CSS for the img class to make the image fit the full div.
Here is the working solution for the edit.
img {
max-height: 100%;
max-width: 100%;
height: 100%;
display:block;
}
Hope this Helps.
I have had a bit of a go at your fiddle but I don't think browsers will change the width of a div based on the width of the image inside it changing its width, I have tried a few things but couldn't get it to work.
I can however suggest another approach to placing elements in the corners of your auto re-sizing image. Instead of placing these elements inside a div which is also holding the image, you could just float the image and float some div's with a fixed width to the right and the left of the image, and then make those div's cut into the image by setting some negative margins on them.
Here's an example jsFiddle demonstrating this approach. You'll see that the images stay in the corners of the main image when you resize the result window (and thereby changing the size of the main image).
HTML
<div class="right">
<img src="..." />
<img src="..." />
</div>
<img src="http://akamaicovers.oreilly.com/images/9780596806767/cat.gif" alt="" />
<div class="left">
<img src="..." />
<img src="..." />
</div>
CSS
html, body {
height: 100%;
width: 100%;
}
img {
height: 90%;
float: left;
}
div {
float: left;
width: 40px;
position: relative;
z-index: 1;
height: 90%;
}
div.left {
margin-left: -40px;
}
div.right {
margin-right: -40px;
}
div > img {
padding: 3px;
border: 2px dashed blue;
width: 30px;
height: 30px;
}
div > img:last-child {
bottom: 0px;
right: 0px;
position: absolute;
}
you want to give your image width to 100%. Use this.
img {
height: 100%;
width: 100%;
}
When you provide a width and height for the div in %, it resizes according to the page size. And the image size in % is relative to the div width and height. I have kept the div height at 90% of the available space and width at 50%. The image is at 90% both height and width, so that you can see the re-sizing of both image and div sections.
html, body {
height: 100%;
width: 100%;
}
div {
height: 90%;
background-color: black;
width:50%;
}
img {
height: 90%;
width: 90%;
}
You have to update your css written for image purpose
img {
max-height: 100%;
max-width:100%;
}
If I understood correctly, you want to resize image by height but keep proportional size?
If so, use this:
img {
height: 100%;
display: inline-block;
}
You might want to use display: block; as well, depending on your needs.
FIDDLE: http://jsfiddle.net/zhyv9/38/
I have updated the fiddle, with the Img tag self close that may cause error some times..,
and If the image have specified size height and width then it will also resize, and the corresponding div height increases/decrease as 90% when I zoom-in/zoom-out
I hope this is the answer, as I have understood wrapping and re-sizing,
Please reply if not working..
Adding this little hack worked for me. To my understanding it forces the browser to redraw/reflow its contents. Fiddle. I can't figure out why this isn't done automatically by the browser. Tested on Firefox, Chrome and Safari.
window.onresize = function() {
$(".thumb").each(function() {
this.style.display = "none";
this.offsetWidth;
this.style.display= "inline-block";
})
}