If i have an image grid in css:
<div class="blockWall">
<div class="blockWallCell">
<a href="#">
<img src="img.gif" />
</a>
</div>
...blockWallCell repeats
<div style="clear:both;"></div>
</div>
with css:
.blockWall
{
width:800px;
}
.blockWallCell
{
float: left;
height: 100px;
overflow: hidden;
width: 100px;
padding:4px;
}
.blockWallCell img
{
border:none;
max-width: 100px;/* or max-height:100px;*/
overflow: hidden;
vertical-align: middle;
}
is there a way via css to make the tag fit the image wholly in the 100x100 .blockWallCell without setting the style of the to max-width:100px; or max-height:100px, i.e. if I don't know if it is a landscape or portrait image. I would like to use the overflow:hidden of the div to chop of the remainder of the non-scaled image.
What you've got right now should do the trick. You'll get a bunch of 100x100 divs with images that will fill as much of the 100x100 space as they can, with any overflowed parts hidden.
Do you want the .blockWallCell to be variable size, maxing out at 100x100? Or do you want the image to stretch out to fill the cell if it's smaller than 100x100 in either dimension?
Related
I need the image to take the entire width of the container unless the resulting height is bigger then the available container's viewport height.
Basically I want the image to be responsive but also that it should still fit the screen. If it doesn't fit the screen it should be scaled down, horizontally centered, and preferably added with black tiles on its sides.
Currently, my CSS class looks like this:
.img-responsive{
display: block;
max-width: 100%;
min-width: 100%;
height: auto;
}
I've tried to play around with max-height on the image, or on a dedicated container, nothing seemed to do the trick by pure CSS.
Clarifications:
I don't know the images dimensions in advance so can't just put them in a container with a preset size.
Basically, my goal is for the images to be always fully visible on the screen (if you scroll to the image) and take up the largest possible surface.
Here's a more detailed example:
Let's say I have scrollable container with a lot of content. The container takes up the entire viewport width (let's say its 500px) and the available visible height of the container is the entire viewport height minus a navbar height (let's say 1000px).
I can't know in advance what's the container's visible dimensions as it can always change.
Inside the container there's whatever, text, images, etc.
Now, for a given image, here are possible scenarios:
If the image is 500x800, it should be presented as is, as it takes up the entire available width, and height is no bigger then the container's visible height.
If the image is 500x2000, it should be scaled down to 250x1000
and horizontally centered. This will take up the entire visible container's height, and keep the image's aspect ratio
If the image is 250x300, it should be scaled up to 500x600, taking up the entire available width
If the image is 200x500, it should be scaled up to 400x1000, taking up the entire available height
If the image is 1000x1000, it should be scaled down to 500x500, taking up the entire available width
Here's a JSFiddle explaining the problem
I would advise against using the IMG tag for this. Rather use a div tag and then use background image properties. Here is the code for this, set the container size to whatever you like:
<div id="container"></div>
<style>
width: 500px;
height: 500px;
background-image: url('your url');
background-size: contain;
</style>
background-size: contain is what is best for this. It scales the image to the largest the image can be within the div without making it larger than its native size. Hope this helps
EDIT:
Forgot to add that if you want it to be in the center of the container, so that when the image doesnt fit the full size of the container there is the white space around it, you use the css code background-position: center center;
Mostly what you need is to give img elements two properties {max-width:100%} and {height: auto}
If you open the snippet below in full screen and resize your window (Note: image sizes are randomly chosen)
you will see how nice they play. They adhere to the max width and they don't overstretch themselves in any direction.
I added some code in there just to make this easier to show
like making giving images {display:block} and {padding-bottom}
body {
background: #131418;
text-align: center;
color: white;
font-size: 25px;
}
body,
.image-container,
.image-container img,
.smalldiv {
max-width: 100%;
}
.image-container img {
height: auto;
display: block;
padding-bottom: 1em;
}
.smalldiv {
/*for demnostration only */
width: 600px;
background: darkblue;
}
.smalldiv,
.image-container img {
margin: 0 auto;
}
<h3>Images will always keep their aspect ratio and they will always adhere to the width of their parent containers.</h3>
<hr>
<div class="image-container">
<h4>This is what the image container looks like when it has the entire screen space</h4>
<img src="http://placehold.it/350x150">
<img src="http://placehold.it/650x150">
<img src="http://placehold.it/950x150">
<img src="http://placehold.it/1250x3150">
<img src="http://placehold.it/350x150">
<img src="http://placehold.it/450x350">
<img src="http://placehold.it/550x650">
<img src="http://placehold.it/650x950">
<img src="http://placehold.it/1250x1150">
</div>
<div class="smalldiv">
<div class="image-container">
<h4>This is what the image containing div looks when it's put inside a container smaller then the screen width</h4>
<img src="http://placehold.it/350x150">
<img src="http://placehold.it/650x150">
<img src="http://placehold.it/950x150">
<img src="http://placehold.it/1250x3150">
<img src="http://placehold.it/350x150">
<img src="http://placehold.it/450x350">
<img src="http://placehold.it/550x650">
<img src="http://placehold.it/650x950">
<img src="http://placehold.it/1250x1150">
</div>
</div>
evilgenious448 answer comes really close, just that it only works with background images. What I have is:
<html>
<head>
<style>
body {
margin: 0px;
}
.holder {
background-image: url('image1.JPG');
background-size: contain;
background-position: center center;
width: 100vw;
height: 100vh;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div class="holder">
<div class="inner">
</div>
</div>
</body>
</html>
I do not know how to size the inner div equally to the image.
Here is an example with code and everything:
You can drag around the page to test.
--- When the viewport is higher / taller than the image, the image's width is the width of the viewport disregarding viewport height. On the other hand, when the viewport is wider than the image, the image uses the viewports height, disregarding its with.
#image {
background-image: url(https://media.cntraveller.com/photos/611bedcd231ed5e8dfa34573/16:9/w_2580,c_limit/sennen-cove-beach-britain-conde-nast-traveller-20april18-rex.jpg);
background-size: contain;
background-position: center center;
width: 100vw;
height: 100vh;
background-repeat: no-repeat;
}
<body id="body">
<div id="image" />
</body>
You can use height: 100% of the parent container (in my case its img-holder). And apply text-align: center to the parent. Like:
.img-holder {
width: 100px;
height: 100px;
border: 1px solid #555;
text-align: center;
}
.img-holder img {
height: 100%;
}
Have al look at the snippet below:
.img-holder {
width: 100px;
height: 100px;
border: 1px solid #555;
text-align: center;
}
img {
height: 100%;
}
<div class="img-holder">
<img src="http://placehold.it/100x200" alt="">
</div>
Hope this helps!
The best and the easiest way is to use vh and vw properties. vh when set to 100 takes up the complete Viewport Height and same goes with vw for width. Further, max height property may be added to stop image from stretching beyond its original dimensions.
I'm putting together an image gallery with captioned images of varying aspect ratios. For uniformity, I want the browser to render each image at the same height, computing the width to preserve the aspect ratio. But I seem unable to figure out how to propagate this width to the width of the caption.
My HTML looks like this:
<div class="photo">
<a href="images/name.jpg">
<img src="thumbs/name.jpg">
</a>
<div class="caption">Imagine long caption here</div>
</div>
And here's one of my many attempts at CSS:
div.photo {
margin: 5px;
float: left;
height: 7cm;
margin-bottom: 3cm;
}
div.photo img {
display: block;
max-height: 7cm;
width: auto;
}
div.caption {
padding: 15px;
text-align: center;
display : block;
width: 90%;
overflow : auto;
}
Here's what I think I'm accomplishing:
Fixed height on the photo element puts everything at the same height.
Bottom margin on the photo element makes room for the caption.
Given max-height and width: auto on the image preserves aspect ratio.
On the caption, text-align and display properties have the caption centered and wrapping properly.
Here's what I'm not accomplishing:
The photo element gets wide enough that many captions are much wider than their containing photos, especially when the photo is a "narrow portrait" 9:16 aspect ratio.
I would really like to avoid writing a program that probes every image to discover its aspect ratio and then forces the width of the containing element manually. Is there a way to get CSS to set the width of an element to match the width of an image contained in a descendant?
Have a look at the variant below. You can set the width of the figure to auto and it should resize correctly this time. Hope this helps!
The HTML:
<figure class="photo">
<img src="photo.jpg">
<figcaption>
Caption goes here.
</figcaption>
</figure>
The CSS:
figure {
display:table;
margin:14px;
padding:7px;
}
figure.photo {
float:right;
}
I am creating a mobile e-mail template (means no javascript) which has to be responsive.
I want to place several images inline, which are scaled down as the screen gets narrower. I did this by using css table and table-cell, and let the image scale. No problem so far.
However, since images are often blocked by e-mail clients, I was requested to create a kind of placeholder in grey, showing the image "alt text" when the image is not loaded. I want this placeholder to be of the same size as the contained image, and to scale at narrower widths too.
I got quite far, as you can see in the following fiddle: http://jsfiddle.net/ow7c5uLh/29/
HTML:
<div class="table">
<div class="table-cell">
<div class="placeholder">
<img src="http://lorempixum.com/120/60/" alt="alt text" width="120" height="60" />
</div>
</div>
<div class="table-cell">
<div class="placeholder">
<img src="http://lorempixum.com/120/60/" alt="alt text" width="120" height="60" />
</div>
</div>
<div class="table-cell">
<div class="placeholder">
<img src="http://lorempixum.com/120/60/" alt="alt text" width="120" height="60" />
</div>
</div>
</div>
CSS:
.table {
display: table;
table-layout: fixed;
width: 100%;
}
.table-cell {
display: table-cell;
text-align: center;
padding: 0 5px;
border: 1px dotted black;
}
.placeholder {
max-width: 120px;
max-height: 60px;
margin: auto;
background-color: #505050;
color: #FFFFFF;
}
img {
max-width: 100%;
height: auto;
}
However, there are two problems:
As the screen gets narrower and the images are scaled, the background-color pops out from under the image. The placeholder-div is scaling just as the image, but its height is calculated (by the browser) to be some 5px more then the image height. Where does that difference come from?
When the images are not loaded (try in the fiddle by just making the image URL invalid) then the placeholder-div's height collapses. How can I make it keep the correct height?
FYI: The actually used images won't always be of the same size, but I will know their dimensions and can calculate their aspect-ratio. I would write those values (like 120px) inline instead of in a separate css-file like in the example.
Thanks in advance for any help!
Add display: block to your CSS img rule to make it a block element instead of inline and you are good to go: Fiddle
Change src="...." of one of them to src="" in the fiddle and you will see the the cell itself already scales.
By adding rule img[alt] { font-size: 2vw; overflow: hidden } to your CSS, the html alt="text" will scale too. overflow: hidden chops excess text when alt is larger than your 120x60px.
(note: [alt] is called an 'attribute' in CSS, search for 'css custom attribute' should you want to learn to create your own.)
See updated Fiddle
I would advise against loosing the width and height rules of the placeholder, but you could change it to min-height/min-width to show at least that something 'is missing'. Or change to max-width: 100% and remove max-height, but this depends on your requirements. You will need to limit the size of an image somewhere up or down the line (for example giving the table a width in px and it's children a (max-)width in % ).
Remove:
img {
height: auto;
}
problem-1 & 2:
img {
max-width: 100%;
max-height: 100%;
}
Ok, here is the problem, my app allow users to insert any image. It is up to them insert very big or very long image. But when I rentder image I want the width="50px" and height="100px".
ok if I do
.myImage{
width:50px;
height:100px;
}
then the image could be distorted cos the proportion is not accurate. So, here is what I think. First I want the image to have width:50px then if the height>100px, then CSS will trim off the bottom.
Ok, let see this example, user inserted a big image with width=150px and height=600px. So if I reduce the width to 50px, the the height will be 200px. I want to cut the bottom of the image so it will show only (w: 50px, h: 100px) see the picture:
So how to do that?
1) Trim image with <div> and overflow:hidden:
div.trim {
max-height:100px;
max-width: 50px;
overflow: hidden;
}
<div class="trim"><img src="veryBigImage.png"/></div>
2) Use max-width: 50px; and max-height: 100px for image itself. So image will preserve it's dimensions
I would suggest using the CSS CLIP property to trim it to the size you want.
img {
position: absolute;
clip: rect(0px,50px,100px,0px);
width:50px;
}
That way, if the image is small enough, nothing will get cut off. Otherwise, you trim it down.
You could wrap the img with a div and apply overflow: hidden;
HTML:
<div class="img-wrapper">
<img src="path/to/image.jpg" />
</div>
CSS:
.img-wrapper{
max-height: 100px;
overflow: hidden;
}
.img-wrapper img{
width: 50px;
}
By using max-width and max-height you can set height to whatever you want and the full image will display.
.myImage{
height:auto;
width:auto;
max-width:300px;
max-height:300px;
}
You need to put the image in a container of the desired trim size with overflow:hidden
html:
<div id="container"><img src="myimage.jpg"/></div>
css:
#container {width:50px;height:100px;overflow:hidden}
#container img {width:50px;}
I am trying to have 3 images aligned in one block. They have to stay in the same sized container and fit horizontally.
Here's the code:
<div class="container">
<img src="http://images2.webydo.com/31/313624/3958/21b785db-14ea-42f7-af0d-7e7a8d8019d9.jpg" />
<img src="http://images2.webydo.com/31/313624/3958/9657ddfd-81e8-4154-bc61-bbe30e4a8740.jpg" />
<img src="http://images2.webydo.com/31/313624/3958/909af36d-b941-4a20-9441-20505c035da3.jpg"/>
</div>
.container {
width: 300px;
height: 200px;
position:relative;
float: left;
text-align: center;
}
.container img {
width: 100%;
height: auto;
margin: 5px;
}
In my CSS solution, I divided the "container" class width by 3 (300px /3) and then subtracted 10px (which i got from padding-left and padding-right of each image). So a single image should have a width of 90px. However, I also wanted to subtract 5px more for browser spacing so the total width of each image should be 85px. Here is the code:
<html>
<head>
<style>
.container {
width: 300px;
height: 200px;
position:relative;
float: left;
text-align: center;
}
.container img {
width: 85px;
height: auto;
margin: 5px;
}
</style>
</head>
<body>
<div class="container">
<img src="http://images2.webydo.com/31/313624/3958/21b785db-14ea-42f7-af0d-7e7a8d8019d9.jpg" />
<img src="http://images2.webydo.com/31/313624/3958/9657ddfd-81e8-4154-bc61-bbe30e4a8740.jpg" />
<img src="http://images2.webydo.com/31/313624/3958/909af36d-b941-4a20-9441-20505c035da3.jpg"/>
</div>
</body>
</html>
Hm...I don't think you can have all three images in a horizontal line if you give them all a width:100%. That property would cause each image to take the full width of the container, meaning each image would be pushed to the next line.
You'll have to give the images a smaller width to fit them all on one line. 100% / 3 = 33.3% (rounded), so use that instead. Here's some modified CSS for .container img that seems to work:
.container img {
width: 33.3%;
height: auto;
padding:5px;
box-sizing:border-box;
-moz-box-sizing:border-box;
}
Note that in addition to changing the images' widths, I also changed the margin to padding, and made use of the box-sizing attribute (read more about it here). This lets you keep that same spacing of 5px around images, without bumping any images onto a second line.
Also, the HTML needs to be altered slightly. In this case, we're taking advantage of the <img> element's default display:inline-block to have them all display on the same line. However, any whitespace in between this kind of element will result in a space between the images, so that needs to be eliminated:
<div class="container">
<img src="http://images2.webydo.com/31/313624/3958/21b785db-14ea-42f7-af0d-7e7a8d8019d9.jpg" /><img src="http://images2.webydo.com/31/313624/3958/9657ddfd-81e8-4154-bc61-bbe30e4a8740.jpg" /><img src="http://images2.webydo.com/31/313624/3958/909af36d-b941-4a20-9441-20505c035da3.jpg"/>
</div>
If you don't understand what I mean by that, try formatting each <img> element onto its own line in the HTML, and see how that affects their positioning.
Here's a JSFiddle so you can see what this achieves. Let me know if you have any questions, and I'll be happy to help further!
EDIT: Alternatively, if you really want to keep the whitespace between your <img> elements in your HTML, you could compensate for the unwanted extra space with a negative margin. Just add margin-right:-4px; to your styles for .container img. Updated JSFiddle to show what this results in.