I want to put an image into a div element, which is much smaller than the image and hide or crop image outside div element. I've done this like this one:
.slideshow img {
width: 250px;
}
.slideshow {
overflow: hidden;
height: 170px;
width: 250px;
position:relative;
}
it works fine, but I image crops from it's top, but I want to center image and then crop it from top and bottom. How can I do this?
Use clip property of css for image or set position relative with negative left and top position
img
{
clip:rect(0px,60px,200px,0px);
}
You can only vertically centre an image in a line that is at least as tall as the image. So the trick is to centre the image in a very tall div, and then use relative positioning to centre the div relative to the original div. The CSS you'll need on the inner div is something like vertical-align: middle; line-height: 850px; position: relative; top: -340px;.
Just add:
position:relative;
left:-25%;
top:-25%;
to your .slideshow img class
This should work.
Related
I was actually wondering if it was possible to mask an image to a circular shape with the use of a single pseudo element, which is the image itself? Let's say it's a rectangle image (not square) and you want to have it masked to a circular shape, without the image being squeezed?
So you'd have:
HTML
<img src="#" class="mask">
CSS
.mask {
A lot of CSS possibilities, up to you
}
I know, with a parent div and using overflow:hidden & border-radius:50% it's possible, but can you do it without the use of a second pseudo element?
Update!
I've noticed that many users seem to think I'm only looking for the CSS code border-radius:50% to create circular shapes, but that's not it. The image should become a circular, not elliptical shape. You can simply use a width and height equal to each other, but then the image becomes squeezed. The answer should contain a none-squeezed image result
The requirement of the solution
- The image should be be a perfect circle, not elliptical
- The image should not be squeezed, no matter the original aspect ratio. Even if you'd use a panorama picture, you'd only see the middle part as an circular shape and the rest hidden.
If you can only use the img tag to produce a mask over itself, then the only work around i can think of is : DEMO
.mask {
width: 0px;
height: 0px;
border-radius: 100%;
background:url(http://placehold.it/300x400) center;/* define position to choose clipped area */
padding:50px;/* this makes a 100px square, so a perfect circle can be made with border-radius */
}
If you can use a wrapper, it can keep the original space used by image and mask can be settled anywhere on top of it via coordonates. DEMO
Markup:
<div class="mask r150 top100 left150">
<img src="http://placehold.it/300x400" />
</div>
CSS:
.mask {
position:relative;
overflow:hidden;
display:inline-block;/* preserve display behavior of initila image to mask*/
box-shadow:0 0 0 1px;/* show where i stands */
}
.mask img {
display:block;/* a way to remove bottom gap*/
}
.mask:before {
content:'';
position:absolute;
border-radius:100%;
box-shadow:0 0 0 2000px white;
}
.r150:before {
height:150px;
width:150px;
}
.top100:before {
top:100px;
}
.left150:before {
left:150px;
}
The use of extra classes can help you to tune different size and mask position.
Here Fiddle: http://jsfiddle.net/8CuXQ/
Something like this:
.mask {
width: 300px;
height: 300px;
border-radius: 150px;
-webkit-border-radius: 150px;
-moz-border-radius: 150px;
}
Goody, Would like to know how can i stretch the image to fit the width, without distort the height? maybe display the center part of the image only? This is the website:
http://youthicons.my/2013/11/lorem-ipsum-dolar-sit-amet/
and the portion of css:
.featured-image, .featured-img{ top: 0; width: 100%; height: 537px; left: 0;}
Thanks!
height: auto; instead of height: 537px on the actual image.
If you don't want it to grow quite so large, you can set height on the div and set `overflow: hidden;'
When using sprites in Compass/Sass, you get a background-image and a background-position generated.
For example:
background: url('../images/generated/bg-sa8e38178a4.png') no-repeat;
background-position: 0 -120px;
This background image is positioned in the upper left corner of your element.
With normal CSS I can change this to the bottom right corner like so:
background-position: right bottom;
However, this doesn't work when using a sprite, as its for the entire sprite instead of each image in my sprite.
How can I tell Compass/Sass to place each image of my sprite in the bottom right corner, instead of upper left?
Note: the element I'm using this sprite on, changes in height, so I can't use fixed pixel values.
Thanks.
EDIT: I'm including this image to illustrate what I mean:
I was able to achive this using the :after psuedo class on my element.
You need to give the :after class a width and height equal to your image, and position it using CSS.
.element {
position: relative;
/* your element css */
&:after {
content: "";
position: absolute;
z-index: 1;
display: block;
width: 60px;
height: 60px;
right: 0;
bottom: 0;
background: url('../images/generated/bg-sa8e38178a4.png') no-repeat;
background-position: 0 -120px;
}
For my website this is what I am using for the image with regards to responsive design:
.logo {
max-width: 100%;
display: block;
height: auto;
margin-left: auto;
margin-right: auto;
}
The image scales properly width wise but the image's height is too big. In these kinds of situations what can one do to make the image scale properly? If I remove height auto and assign 70px the image looks good when viewed in full version but as you begin to shrink the size of the browser the image looks like it's going inwards.
HOw can i fix this?
try this:
{
max-height: 100%;
max-width: 100%;
height: auto;
width: auto;
}
for this wrapp a div around img and apply the height you want and overflow hide it
.imgwrapp {width:100%;height:70px;overflow:hidden;float:left}
So given the css you have there, the ratio of width to height of the image is what's giving you problems. If you don't like the height of the image when the browser is wide, then you should probably get a different image/crop it. When you set the height to 70px what you're doing is forcing the image into a box that it doesn't fit in, so the image will look funny as it's being scaled weird.
But alas there is another option. here is a jsfiddle that shows only the amount of the image that fits within my first n pixels (in your case 70) so that way it will kind of slide out of view. Check the css here :
.header {
width: 100%;
height: 100px;
overflow:hidden;
}
.everythingelse {
width: 100%;
height: 200px;
}
When I insert an image in a container with fixed width and height, the image stretches to fit that space. Is there a way to display the image at its normal size, but with the excess clipped out?
The modern way is to use object-fit: none; (or the more common object-fit: cover; if you want to scale, but without stretching).
img {
object-fit: cover;
}
97% of browser sessions support this as of 2022 May. — Can I use?
If you want to anchor the image to the top left corner instead of the center, add:
img {
object-position: 0 0;
}
<div style="width: 100px; height: 100px; background-image: url(your image); background-repeat: no-repeat;"></div>
Then in the above DIV you can play with CSS
width/height
background-position
to create different crop effects.
You can use the CSS clip property:
#image_element
{
position:absolute;
clip:rect(0px,60px,200px,0px);
}
The downside of using clip is that the element has to be absolutely positioned, and is only available with the 'rect' shape.
See:
https://www.w3schools.com/cssref/pr_pos_clip.asp
http://www.cssplay.co.uk/menu/clip_gallery
Use this :
http://www.w3schools.com/css/pr_background-position.asp
background-position: 5px 5px;
and then set the height and width of the div
height: 55px;
width: 55px;
Show it as a background image