In my gallery, the thumbnails are 240 pixels wide, but their heights vary. Is there any way to crop the thumbnail images so that they are all 150 pixels high?
At the moment I've got this:
.gallery > div > a > img {
position:absolute;
top: 0;
left: 0;
clip: rect(0px,240px,150px,0px);
overflow: hidden;
border:none;
}
This works, but only looks good with the images on the top row as they are all aligned. The images on the other rows are not aligned because they are being placed below the original heights of the images on the row above. What do I need to add to my CSS to sort this out?
I would suggest wrapping them in a div with a set height of 150px and overflow set to hidden.
.galleryImgWrapper {
height: 150px;
overflow: hidden;
}
.galleryImgWrapper img {
/* your styles here */
}
You can use these codes for generate thumbnails without need any crops
.thumbnail {
position: relative;
width: 200px;
height: 200px;
overflow: hidden;
}
.thumbnail img {
position: absolute;
left: 50%;
top: 50%;
height: 100%;
width: auto;
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
.thumbnail img.portrait {
width: 100%;
height: auto;
}
<div class="thumbnail">
<img src="landscape-img.jpg" alt="Image" />
</div>
<div class="thumbnail">
<img src="portrait-img.jpg" class="portrait" alt="Image" />
</div>
Related
I'm using some CSS I found in the wild to make flip cards. I've made a few adjustments in an attempt to make them fluidly responsive. My attempt is here:
https://jsfiddle.net/u18rhf6q/
css:
.flip-card-wrapper {
width: 50%;
height: auto;
}
.flip-card {
background-color: transparent;
width: 100%;
height: 100%;
perspective: 1000px;
}
.flip-card img {
width: 100%;
height: auto;
}
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
}
.flip-card-wrapper:hover .flip-card-inner {
transform: rotateY(180deg);
}
.flip-card-front, .flip-card-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.flip-card-front {
color: black;
}
.flip-card-back {
background-color: #c1272d;
color: white;
transform: rotateY(180deg);
}
html
<div class="flip-card-wrapper" >
<div class="flip-card" >
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="https://dummyimage.com/600x600/000/fff" alt="Avatar" >
</div>
<div class="flip-card-back">
<h1>John Doe</h1>
<p>Architect & Engineer</p>
<p>We love that guy</p>
</div>
</div>
</div>
</div>
What I hope to happen is if I adjust the width of flip-card-wrapper, the contents would expand relative to that width and the flip would continue. However, it only works if I also supply a height to flip-card-wrapper. Since the front and back are both absolute, I can't a height to bubble up. Any ideas?
One possibility for keeping your card height responsive might be to set a padding-bottom or padding-top on your flip-card-inner class. Since those heights are based on the parent's width when you use a percentage, padding-bottom: 100%; should create a perfect square. If you want to play around with the sizing, there's a good overview of aspect ratio boxes at https://css-tricks.com/aspect-ratio-boxes/.
How to crop the top of an image has already been described in this question. However, I am trying to crop an image by a percentage when the image dimensions are not known ahead of time. The container's resulting height should then be dependent on the size of the image.
Using the following, I can crop the top of an image, but it requires manually specifying the amount of the image to show in pixels. Is there a way I can specify I want to crop the top 10% of the image without knowing the image size ahead of time?
.container {
overflow: hidden;
position: relative;
height: 370px;
}
.container img {
position: absolute;
margin-left: auto;
margin-right: auto;
bottom: 0;
left: 0;
right: 0;
}
<div class="container">
<img class="img" src="http://placekitten.com/400/500" />
</div>
Here is an idea that rely on scale. You keep the image in-flow (don't use position:absolute) then you scale the container by 0.9 which is 90% of the total height then you scale the image by 1.1 to keep it's original size. This will trim the image by 10% but since transform is only a visual effect you may have space at the top or the bottom of the container (based on the transform-origin)
.container {
overflow: hidden;
outline:1px solid red;
display:inline-block;
}
.container img {
display:block;
}
.cut {
transform:scaleY(0.9);
transform-origin:top; /* The extra space will be on the bottom*/
}
.cut img {
transform:scaleY(1.1);
transform-origin:bottom; /* This should be bottom to cut the top*/
}
<div class="container">
<img class="img" src="http://placekitten.com/300/200" >
</div>
<div class="container cut">
<img class="img" src="http://placekitten.com/300/200" >
</div>
To be more precise we can consider calc() like below:
.container {
overflow: hidden;
outline:1px solid red;
display:inline-block;
}
.container img {
display:block;
}
.cut {
transform:scaleY(0.9);
transform-origin:top; /* The extra space will be on the bottom*/
}
.cut img {
transform:scaleY(calc(1/0.9));
transform-origin:bottom; /* This should be bottom to cut the top*/
}
<div class="container">
<img class="img" src="http://placekitten.com/300/200" >
</div>
<div class="container cut">
<img class="img" src="http://placekitten.com/300/200" >
</div>
I think the best approach to this without Javascript would be to translate the image up a certain percent, then scale it to fill the original height of the container. Anything else will leave a gap at the bottom.
.img_container img {
transform: translateY(-50%) scale(2);
}
https://jsfiddle.net/amoliski/n4ojdzyr/
This should do the trick, using translateY (got that from How can I get the height of an element using css only)
As you can see, the .container does not have a hardcoded height, however, it will load with the original image height, which is 500px, even though the image is loading as 450px (500px - 10%)
.container {
overflow: hidden;
position: relative;
}
.container img {
margin-left: auto;
margin-right: auto;
bottom: 0;
left: 0;
right: 0;
transform: translateY(-10%);
}
<div class="container">
<img class="img" src="http://placekitten.com/400/500" />
</div>
You can do this with a little bit of JavaScript (I've inlined it for simplicity's sake but you could move it to it's own function)
<div class="container">
<img class="img" src="http://placekitten.com/400/500" onload="javascript:this.parentElement.style.height = (this.height * 0.9)+'px';" />
</div>
Here's a working JSfiddle.
An alternative would be to use the top CSS property in a negative fashion on a relative image like the snippet below. This works for an image of an arbitary width and height. Just adjust your top value, accordingly.
html,body{ height:100%; margin:0; padding:0; }
.container {
overflow: hidden;
position: relative;
height: 100%;
width: 100%;
display:flex;
margin-bottom: -10%;
align-items:center;
justify-content:center;
}
.container img {
position: relative;
bottom: 0;
left: 0;
height: 100%;
top: -10%;
right: 0;
}
<div class="container">
<img class="img" src="http://placekitten.com/400/500" />
</div>
To remove the extra bottom margin, just subtract the margin-bottom equal to the amount you subtracted from the top. Here it is margin-bottom: -10%;
Adjust the top value according to your dynamic images. Also note, I added height:100% to your container so you can see the full image but the top part is cropped. I used flex for centering. Test for another image but this time, it is cropped 50% from the top
html,body{ height:100%; margin:0; padding:0; }
.container {
overflow: hidden;
position: relative;
height: 100%;
width: 100%;
margin-bottom: -50%;
display:flex;
align-items:center;
justify-content:center;
}
.container img {
position: relative;
bottom: 0;
left: 0;
height: 100%;
top: -50%;
right: 0;
}
<div class="container">
<img class="img" src="https://www.fujifilm.com/products/digital_cameras/x/fujifilm_x_t3/sample_images/img/index/ff_x_t3_002.JPG" />
</div>
I'm trying to display play button over responsive image. Button have 96x96px and need to be at center of image.
I tried many methods but always is bad. I read something about flex design, maybe it's simple to do in flex?
I need really simple method because there will be 5 to 10 elements.
Thanks and regards
If you give the image a parent element, you can make the overlay a background image of the parent and position it in the center of the parent.
div {
display: inline-block;
position: relative;
}
img {
max-width: 100%;
}
div:after {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%,-50%);
width: 96px;
height: 96px;
background: url('https://img.clipartfest.com/d0227ce70c0b9f371e7a7a018729143e_thumbs-up-smiley-face-big-thumbs-up-clipart_2891-2674.jpeg');
background-size: cover;
content: '';
}
<div>
<img src="http://kenwheeler.github.io/slick/img/fonz1.png">
</div>
And here is the same technique but with the overlay as an img in the parent.
div {
display: inline-block;
position: relative;
}
img {
max-width: 100%;
}
.thumb {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%,-50%);
width: 96px;
height: 96px;
}
<div>
<img src="http://kenwheeler.github.io/slick/img/fonz1.png">
<img src="https://img.clipartfest.com/d0227ce70c0b9f371e7a7a018729143e_thumbs-up-smiley-face-big-thumbs-up-clipart_2891-2674.jpeg" class="thumb">
</div>
Put your image into a relative container, and your play button as absolute. Somethinkg like this:
<div class="videoContainer">
<img src="link_to_your_image" alt="">
<img src="link_to_play_button" alt="play" class="playBtn">
</div>
and the css:
.videoContainer {
position: relative;
}
.playBtn {
position: absolute;
width: 96px;
height: 96px;
left: 50%;
top: 50%;
margin-left: -48px; /*half of the width */
margin-top: -48px; /*half of the height */
}
So I'm using this pure CSS sliding gallery without the transition effects, and it's working pretty great so far.
However, not all my images are the same size! This wouldn't be a problem, except all the full-view images seem to be aligned to the left, and it would look much nicer if they were centered.
I've tried settingthe margins to auto, and playing around with putting it all in another centered container, but it doesn't seem to be working. I think it has something to do with the fact that the full-view images have their position set to absolute.
Does anyone have any suggestions?
EDIT: Here's what I'm using right now and here it is in Jfiddle
HTML:
<div class="imagescontainer">
<div id="images"><br />
<img src="http://img19.imageshack.us/img19/6471/6eor.png" alt="Liox Poster 1" name="image1" id="image1" />
<img id="image2" src="http://img89.imageshack.us/img89/8955/ha1e.png" />
<img id="image3" src="http://img812.imageshack.us/img812/6363/1k48.png" />
<img id="image4" src="http://img577.imageshack.us/img577/5867/a26z.png" /></div></div>
<center>
<div id="slider">
<img src="images/mini_lioxposter1.png" alt="LIOX Poster"/>
<img src="images/mini_lioxposter2.png" alt="LIOX dimensions" />
<img src="images/mini_lioxposter3.png" alt="Technical drawings" />
<img src="images/mini_lioxposter4.png" alt="Technical drawings" /></div></center>
</div>
CSS:
.imagescontainer
{
margin-left:auto;
margin-right:auto;
border-style:dotted;
text-align:center;
}
#images {
height: 270px;
overflow: hidden;
position: relative;
margin: 5px auto;
}
#images img {
height: 250px;
padding-top:10px;
position: absolute;
top: 0;
left: -600px;
z-index: 1;
opacity: 0;
}
#images img:target {
left: 0;
z-index: 9;
opacity: 1;
}
#images img:first-child {
opacity: 1;
}
#images:hover
{
opacity:0.5;
}
Thanks!
Simple use this simple trick, that will center it vertically as well as horizontally:
#images img {
top:50%;
left: 50%;
width: 440px;
margin-top: -125px; /* Half the height */
margin-left: -220px; /* Half the width */
height: 250px;
position: absolute;
z-index: 1;
opacity: 0;
}
Take a look: http://jsfiddle.net/CPsmg/1/
Also see reference: http://css-tricks.com/snippets/css/absolute-center-vertical-horizontal-an-image/
try this:
img {
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
}
I am creating a round avatar in the user's profile and intend to set the user's image in the round avatar container.
If the image is a square there will not be an issue
However, I was not able to constraint an image which is not a square image for example for this non-square image
I will get this result
This is the CSS code I am using
.avatar_container {
display: inline-block;
width: 25%;
max-width: 110px;
overflow: hidden;
}
.avatar_container img {
border-radius: 50%;
}
What can I do to always maintain a round avatar? And that the image in it won't be distorted? overflow should be hidden
UPDATE: #grenoult found a link with a great solution using css transforms. This is nicer than my previous solution because it allows you to crop tall and wide images. Check it out: http://jonathannicol.com/blog/2014/06/16/centre-crop-thumbnails-with-css/.
OLD ANSWER:
What you want to do is create a square container div and put the border-radius on that. Then, size the image to fit it.
HTML:
<div class="mask">
<img src="http://i.stack.imgur.com/MFao1.png" />
</div>
CSS:
.mask {
display: inline-block;
width: 100px;
height: 100px;
border-radius: 50%;
overflow: hidden;
}
img {max-width: 100%;}
jsfiddle: http://jsfiddle.net/V2Xjy/
This post is a bit old but another option to achieve a circular image from a portrait or landscape image is to use object-fit (which is now supported, at least for img tags in all browsers but IE).
HTML
<div class="mask">
<img src="http://i.stack.imgur.com/MFao1.png" />
</div>
CSS
img{
width: 200px;
height: 200px;
object-fit: cover;
border-radius: 50%;
}
Dispite #alexvance already gave that useful link, I will add the entire code to ensure it will still remain after link becomes broken…
Example
HTML
<div class="thumbnail">
<img src="landscape-img.jpg" alt="Image" />
</div>
<div class="thumbnail">
<img src="portrait-img.jpg" class="portrait" alt="Image" />
</div>
CSS
.thumbnail {
position: relative;
width: 200px;
height: 200px;
overflow: hidden;
}
.thumbnail img {
position: absolute;
left: 50%;
top: 50%;
height: 100%;
width: auto;
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
.thumbnail img.portrait {
width: 100%;
height: auto;
}
Kai Qing's suggestion to try max-height is helpful to include as well. This allows you to mask a 'source' image which isn't square without distortion.
http://jsfiddle.net/bw99N/2/
.mask {
display: inline-block;
width: 100px;
max-height: 100px;
border-radius: 50%;
overflow: hidden;
}
img {
max-width: 100%;
}