We have an image gallery with responsive sizes, using a ready made React gallery.
The images need to fit into a container with predefined, responsive height and width, but the images we're getting from the server are in different proportions and sizes: sometimes the proportions don't match, and sometimes the image is not big enough to even fill the container.
The product requirement is that an image should only be scaled up to 20% of the original image size to fit the container:
How do I even refer to the original image size in CSS? If I use percentage that would be referring to the container size... I stumbled upon Object-fit but it's not supported on IE.
I thought of using inline styles from JS but that would be complicated since this is responsive and the sizes would need to be calculated again on each window resize.
Thank you.
There can be two cases :
If you are taking <img> inside you container
.container
{
width:100%;
height:300px;
}
.container img
{
min-height:100%;
min-width:100%;
max-height:100%;
max-width:100%;
}
<div class="container">
<img src="https://regmedia.co.uk/2015/11/16/help_2.jpg">
</div>
If you are taking image as background of the container
.container
{
background-image: url('https://regmedia.co.uk/2015/11/16/help_2.jpg');
background-size: 100% 100%;
width:80%;
height:200px;
}
<div class="container">
</div>
Related
I am trying to display some content through an iframe.
1.The iframe window's height and width will be dependent on the height/width of a mobile screen and will thus vary based on the device screen size.
2.The content, which is designed within a of width and height of 800px and 600px.
3.Based on the screen-size, the content will be scaled using 'transform:scale(x)'
The content will only be scaled down, no upscaling will happen.
Now, the I've managed to centre-align the content(#container) using some css-code
#container{
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
width:800px;
height:600px;
}
The above CSS is being applied to the container that I am trying to display in the iframe.
The iFrame size is dependent on the window.innerHeight
var iframe = document.getElementById('iframe');
iframe.height = window.innerHeight;
iframe.width = window.innerWidth;
I am also applying full-screen to the iframe.
iframe.requestFullscreen();
The container also gets scaled down, incase the device-height ( in landscape mode)
so a transform scale is applied to the container based on this.
Incase the screen-height is 300px,
#container{
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
width:800px;
height:600px;
transform:scale(0.5);
}
This works fine for mobile screens which have a Width greater than 800px, in cases where the width is less than 800px, the content stops centre-aligning with respect to the screen-width.
NOTE:
Content that I refer to is an interactive div, a mini-game of sorts which uses various positioned elements. Let us assume that this can't be modified and only the 800 x 600 div needs to be centre aligned.
Is there any solution to this?
I can elaborate more if required.
I would like the content to centre align, even when the screen-width is less than 800px, when being shown through an iframe
<div class="parent">
<iframe src="#"></iframe>
</div>
Maybe this:
.parent {
display: block; //if it's for some reason something else
text-align: center;
}
iframe {
display: inline;
}
I have a div I use as a container and an image I use as a "background" (not literally, I was told I couldn't do this with background attribute) and then a content div:
CSS
#container {
display:table;
width: 100%;
min-width:100%;
}
.img1 {
//DON'T KNOW WHAT TO PUT HERE;
}
#content {
//not important;
}
HTML
<div id="container">
<img class="img1" src="img.png"/>
<div id="content"> Content </div>
</div>
I need the container div to be 100% screen width, and so the contained image, while both of them must have the image's resulting height (after the resizing from taking 100% screen width) (no stretching).
Any way to do that? I tried a lot of min-height and width combination but nothing worked so far.
I prefer CSS and HTML only solutions, if possible.
Not exactly sure what you mean, but how does this look: https://jsfiddle.net/b76fjtcv/
basically it's
.img1 {width: 100%;}
This updated version of the fiddle also adds a max width to the img so it doesn't get too fuzzy. Just set the max-width of the .img1 to the image's full width.
What are both images? You only have one. look at this, you can use tables for formatting as well if you're not comfortable with div's.
Also, your image could be smaller or larger than the screen width, what then? Do you want scrolling or scaling?
I have a large image whose height is bigger than the screen height. I have no problem with the width. I need to crop it so that the top 65% of the screen contains this image.
<body>
<img class="img" src="image.jpg" alt="img">
<p>Description</p>
</body>
If I write a CSS as below, the whole image gets compressed to fit in 65% screen. Moreover, if I resize the screen, the image automatically starts attempting to fit in the top 65%, making the whole screen look disturbed.
body, html { height:100% }
img.img { height:65% }
I want instead, the image to be cropped so that the leftover fits in the 65%, and then it stays that way. That is, if I now resize the window, let the vertical scrollbar appear. How can I achieve this?
(PS: I didn't want to give a fixed height because I want the webpage to be viewed in different devices like mobile phone and iPads too.
I think this is what I need:
Get the maximum height of the device (not the current height of the browser screen as the user might have minimized it for some reason)
Crop the image in such a way that it fits the top 65%, and display it
Keep the image size that way irrespective of the user changing the screen size
But I am not sure how to achieve it.)
Is this what you are seeking: http://jsfiddle.net/JjwMw/1/
body, html {
height: 100%;
margin: 0;
padding: 0;
}
.container {
height: 65%;
width: 100%;
position: relative;
top: -22.75%; /* 65*35/100 */
background-image: url(http://placehold.it/1024x768);
background-size: cover;
background-position: center bottom;
}
Note that the image is now a background-image and is leveraging the background-size property which is not supported in IE8 (...who cares?). If the image cannot be a background image, you scale a div proportionally to fill the width using a padding hack (Proportionally scale a div with CSS based on max-width (similar to img scaling)) and have the inside image set to 100% width and height.
Maybe this can be useful to you:
http://demo.solemone.de/overflow-image-with-vertical-centering-for-responsive-web-design/
Also a search for css cliping property here or in google should bring enough info
I have several images with very varying dimensions.
Some images may be as small as 50x100 and others as big as 4000x4000.
I want to show these images in their original size (never bigger), or scaled down to just fit inside the browser window.
Using the background image property I have gotten the images to always fit inside the browser, but I can't stop them from up-scaling if the browser is bigger than the image:
<div class="slide-pane" style="background-image: url(<insert url to image here>);"></div>
.slide-pane {
background-repeat: no-repeat;
background-size:auto;
position: absolute;
background-position: center;
background-repeat: no-repeat;
height: 80%;
width: 80%;
}
I have found these Javascript/Jquery solutions:
https://github.com/gutierrezalex/photo-resize
How to resize an image to fit in the browser window?
But I'm hoping there are some CSS only solutions.
max-height:100%;
max-width:100%;
height:auto;
Apply that to an img not an elements background image. Background images don't have full browser support for max width height. You could use background-size set to 100% 100% but I'd recommend using an img for better css control and accessibility.
If they’re content images (and not there for style) then you’re better off using an <img> element in the page. If you do that then you can give it img { max-width: 100%; } in your CSS. This has the added benefit of working in IE8 (unlike background-size).
So I have this sample to illustrate what I need :
css
.thumb-image {
height:450px;
width:450px;
}
#image-container {
width: 800px;
height: auto;
}
html
<div id="image-container">
<img src="Forest.jpg" class="thumb-image" alt="Forest" style="cursor: pointer;" />
</div>
js
$('.thumb-image').click(function(){
$(this).toggleClass('thumb-image');
});
Here the image is downloaded from the client at its full size. I don't use cached images and in order to simulate thumbnails, I just apply width and height to each image. However I want the user to be able to see larger image when he clicks on it, so I found that using $(this).toggleClass('thumb-image'); is most appropriate because this gives me the ability to enlarge the image and then turn it back to the predefined dimensions which is ok. But some images are too large so I want to restrict the width of the displayed image to something acceptable (which in my case is 800px) and also I want to be able to control the place where the enlarged image is shown so I created a <div id="image-container"> where I want to appear my enlarged image.
The problem is that I don't know how to force the image to occupy only the space of the div without enlarging the div as it happens now.
You could make sure no images are wider than its container with something like this;
#image-container img {
max-width: 100%;
}
The best solution would be to not serve images bigger than you need, save some bandwidth ;)
<style>
.thumb-image {
height: 450px;
width: 450px;
}
#image-container {
max-width: 800px;
height: auto;
}
#image-container img {
width: 100%;
}
</style>
You can user overflow:hidden in your image-container div or also assign 100% width to img tag.
Suggestion :-
It is not an optimum way to do this. if your image-container having less width than you should resize your image using image thumbnail library. there are number of benefits to use resize image instead of control height width using html and css.
small size image take less time to page load
image looks good. without stretch