I am trying to crop 50px from the top of an image. I am following the below reference but for some reason it didn't work in FF but worked in Chrome.
https://css-tricks.com/clipping-masking-css/
Html:
<img src="https://s30.postimg.org/lkqxmrk29/about.jpg" class="rectshape">
Demo:https://jsfiddle.net/squidraj/a4j343hg/1/
Any help is highly appreciated.
Since the clip path is not supported very well, why not use overflow: hidden and a container element? Here is your updated JSFiddle demonstrating this. A negative margin can be used to hide part of the image. Cropping the image from other sides can be accomplished easily by using negative margin on the other sides. Only if you want a non-rectangular clipping path, you will have to resort to the SVG clipPath that was referred to in the comments. Example Fiddle.
.rectshape {
overflow: hidden;
margin: 5px;
border: 1px solid #000;
}
.rectshape > img {
margin-top: -50px;
border: 1px solid #00f;
}
<div class="rectshape">
<img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a">
</div>
<div class="rectshape">
<img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a">
</div>
<div class="rectshape">
<img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a">
</div>
Related
Okay, this seems to be an issue with so many potential solutions but none that will work for what I want to do. I always want to display perfect circles, even if the underlying image is not a perfect circle. But, I don't want to specify an image dimension by px because I want it to be responsive. It seems that no matter which solution I try, the circles always either become warped into ovals or the picture dimensions completely take over and make it gigantic.
HTML:
<div class='item-image'>
<img class='img-circle img-responsive img-center' src='#' />
</div>
Goal:
Regardless of the image size (rectangles), I want the part of the image beneath the red circle to show through.
The best way to do this is per overlay. And make the circle with CSS!
<div class="wrapper">
<img src="#" class="img-responsive">
<div class="circle"></div>
</div>
.wrapper has position: relative and .circle has position: absolute and border-radius: 100%.
The wrapper has to be positioned with inline-block. Center the wrapper with text-align: center.
Center an absolute positioned element as follows:
.el {
position: absolute;
top: 50%;
margin-top: -(height / 2)%;
left: 50%;
margin-left: -(width / 2)%;
}
If you want the image inside the circle, make the circle bigger.
Example
HTML:
<div class="circle">
</div>
and use css for image in background:
.circle{
border: 2px solid red;
width: 200px;
height: 200px;
border-radius:100%;
background-image: url('')
}
check the fiddle
Its been so frustrating with CSS, I have really hard time figuring how to do this.
Let me explain what exactly I am trying to achieve. I am using wordpress and have a div in which I am trying to vertically align both multiple lines of text and image, so that text becomes centered to image. Image is responsive, as well as div size is dynamic. I have tried with fixed width and height for image and text, using display:table and display:table-cell
The issue is the image is getting scaled to 4times its uploaded size
HTML
<div class="image">
<img class="size-full wp-image-12291 alignleft"src="http://example.com/wp-content/uploads/2013/10/terminal1.png" />
<p>I want to get it centered</p>
</div>
CSS
.image {
display:table;
padding-top: 50px;
padding-bottom: 50px;
position: relative;
margin-bottom: 10px;
}
.image:after {
content: '';
width: 0;
height: 0;
border-top: 25px solid transparent;
border-right: 30px solid transparent;
border-left: 30px solid transparent;
position: absolute;
left: 50%;
margin-left: -30px;
bottom: -25px;
}
p {
display:table-cell;
height:100%;
vertical-align:middle;
}
img {
display:table-cell;
width:100%;
height:auto;
vertical-align:middle;
}
The problem is it is scaling the image to 4 times its uploaded size.
I have used display-table with fixed height and width for image and text block, it worked well. I am trying to work it out for responsive images.
Is there a reason, that this is happening because of wordpress, because, when you upload image to wordpress, it has an option for image size class as medium and large. The large image size is being taken as the class, if you notice in the HTML. Is this happening as I am specifying 100%.
you are almost there, what you tried with display: table-cell is exactly what you need. Just don't use it on your image but on an surrounding element instead. So your image stays the same size. right now you use width: 100%, that scales your image.
<div class="image">
<div class="row">
<div class="cell">
<img class="size-full wp-image-12291 alignleft"src="https://www.google.de/images/srpr/logo11w.png" />
</div>
<p class="cell">I want to get it centered</p>
</div>
</div>
See the fiddle here: http://jsfiddle.net/GHVKM/1/
I have a thumbnail image and another smaller image which overlaps the thumbnail image. But the padding changes for the smaller overlapping image as I zoom in and out and the problem exist only with the CHROME browser. Its working fine with IE and firefox. I tried using percentage to set the padding values for the smaller image but the problem still exist.
Here are the images.
This is the HTML
<div class="car-item">
<div class=" car-image">
<img src="/~/media/images/thumb.ashx" alt="Image 1" />
</div>
<div class="car video">
VIDEO
</div>
<div>
position for car video is absolute
position for car item is relative
and for car-image is static
You will have issues at times when using percentages. This is a good example of when to use absolute positioning.
I have no idea what your code looks like so here is a basic example of how to accomplish what you have pictured above with absolute positioning. I used a span tag instead of an additional image tag but it should work all the same.
You might have to modify your HTML and CSS a little furthor to get it to work in your environment.
http://jsfiddle.net/6C8gT/
Here is an updated jsFiddle (http://jsfiddle.net/6C8gT/1/) that uses your markup and another one with reduced markup (http://jsfiddle.net/6C8gT/2/). You don't really need those DIVs unless you have plans for them in the future.
I just did what I have posted below but modified the CSS to match your HTML. You'll have to check out the jsFiddles.
HTML
<div class="container">
<img class="thumb" src="http://lorempixel.com/300/200/" />
<span>Video</span>
</div>
CSS
.container {
position: relative;
}
.container img {
display: block;
}
.container span {
color: white;
background-color: black;
padding: 5px 10px;
position: absolute;
left: 0;
bottom: 0;
}
<div>
<div id="div1" class="myimg">
</div>
<div id="div2" class="detail">
</div>
</div>
My html5 block is as above. I am using media queries for styling it for iphone,ipad,desktop.
I am new to responsive design. I want to implement style so that div1's image size don't get changed and div2's text contains should be shrinked as I reduce width of my browser window.
even if I am trying to give div2 %width and min-width it is comming down the div1. It is not staying beside div2. If someone can guide me how to write this. that will be a great help.
Yep, this can be accomplished pretty easily. Here is an example on JSFiddle.
HTML
<div id="div1" class="myimg"></div>
<div id="div2" class="detail"></div>
CSS
.detail {
overflow: hidden;
min-height: 50px;
border: 2px dashed black
}
.myimg {
float: right;
width: 250px;
min-height: 50px;
margin-left: 10px;
border: 2px dashed red
}
Is this what you were wanting to accomplish?
On my homepage I have a slideshow of pictures that are user selectable. I don't want the user to have to modify the image at all.
http://homespun-at-heart.com/ is the example except that the way that it currently is, the user has to modify the image.
What I would like to do is to have a div that is layered on top of the image so that it appears like the content area has a round corner.
How do I position my "round corner" div on top of the image without it pushing the image over?
well you could achieve this with the css3 border-radius property on a div on top, but it's not supported in all browsers. For an image based solution, something like:
html
<div id="container">
<div id="image"><img src="blah.jpg" /></div>
<div id="round">
<img id="topLeftRound" src="leftRound.png" />
<img id="bottomRightRound" src="rightRound.png" />
</div>
</div>
css
#container{
position:relative
}
#image{
position:absolute;
top:0;left:0;
height:100%;
z-index:10;
}
#round{
position:absolute;
top:0;left:0;
height:100%;
z-index:20;
}
#topLeftRound{
position:absolute;
width:10px;height:10px /* or whatever */
top:0;left:0;
}
#bottomRightRound{
position:absolute;
width:10px;height:10px /* or whatever */
bottom:0;right:0;
}
I'm assuming you can guess what you want your topLeft and bottomRight image to be... Just the rounded section of that corner.
I think that's what you're looking for?
You could simply have two divs, one inside the other, both the same width and height. The bottom one is used for the actual photo, i.e. it's background-image will be the photo. And the top one has a background image with transparancy, which is just the 2 rounded corners:
<div id="slideshow"><div id="slideshow_border"></div></div>
Or (perhaps even better), you could have the outside div with the image as a background, then two divs inside, one floated to the left and one to the right, each with a seperate transparant border image. This means that person browsing your website won't need to download the extra transparant pixels that aren't necessary.
<div id="slideshow">
<div class="border left"></div>
<div class="border right"></div>
</div>
And the CSS:
#slideshow {
width: 400px; height: 400px;
background-image: url(images/slideshow1.png);
}
#slideshow .border {
width: 50px; height: 50px;
}
#slideshow .border.left {
float: left;
background-image: url(images/border-left.gif);
}
#slideshow .border.right {
float: right;
margin-top: 350px;
background-image: url(images/border-right.gif);
}
I just used arbitrary values in the CSS.
Do you use jquery on your site? If you do, you can use this plug-in to generate round corners on dom elements : www.jquery.malsup.com/corner/ or this one: www.dillerdesign.com/experiment/DD_roundies/. Both work very well and support all browsers including IE6. To detect IE6 if needed you can use this plug in http://api.jquery.com/jQuery.browser/.
You could do this very easily with CSS3's border-radius property, and you don't need an overlay div or anything. It won't work in IE8 and below, but it works in Webkit and Firefox.
#slideshow img {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}