I have image with white padding in the top and bottom. See attachment please.
When I try to use border-radius to this images I get distorted edges.
How can I fix this issue in this case? Because I can not replace image on image without white space.
Snippet
If you know the exact height of the padding inside the images, you could create a workarund that uses the image as a background-image on a container. If you size the container exactly like the "real" image size, and position the background-image correctly, you can then apply the border-radius on that container.
.imagecontainer {
background: url(http://nafantano.com/image/cache/catalog/toys/2017/img_8356____by_nafantano-d9aagdh-399x287.jpg) no-repeat 0 -10px;
border-radius: 20px;
display: inline-block;
height: 230px;
width: 300px;
}
https://jsfiddle.net/tc29nedy/5/
Here is my proposal:
<div class="image hovereffect">
<a href="#">
<img class="img-responsive" src="https://theimgurl" id="featured_55">
</a></div>
Use in css the overflow:hidden for the image class and the image img need a margin-top:-10.
.image {
width:300px;
height: 250px;
border-radius:20px;
overflow:hidden;
}
.image img {
margin-top:-10px;
}
You Can TRY
img {
border-radius: 20px;
}
<img src="http://wallpapercave.com/wp/206q0ew.jpg" style="height:250px;">
Related
I'm trying to get image from odoo database to show the image into div background, but my image has white space around it, so i need to remove this white space to apply div background image,
Mycode :
<div t-attf-style="text-align:center;background:url('/web/image/event.event.ticket/#{doc.event_ticket_id.id}/image_medium') no-repeat;
font-size:#{doc.event_ticket_id.font_size}px;width:50%;height:900px;float:left;background-size:500px 900px;display:table;">
<span style="vertical-align:middle;text-align:center;display:table-cell;" t-esc="doc.name"></span>
</div>
How to remove white space around images using CSS ?
Maybe try one of these code's:
img{vertical-align:bottom}
or
img { vertical-align: top; }
or
html, body {
margin: 0;
padding: 0;
}
Hope it helped.
You can try something like this
.main{
text-align:center;
background:url('https://i.stack.imgur.com/hQPzy.png') no-repeat;
font-size:12px;
width:50%;
height:900px;
float:left;
background-size:500px 900px;
display:table;
background-position:-50px -35px;
}
<div class="main">
<span style="vertical-align:middle;text-align:center;display:table-cell;"> Content</span>
</div>
But you have to know size of white space of images. Then you can (-) the position.
I have tried something. Please check it this works fine for you. Here I have tried to set background position and background size. Rest everything can vary like div's width and height.
.back{
background: url('https://i.stack.imgur.com/hQPzy.png');
height: 200px;
width: 200px;
background-size: 130% 150%;
border: 1px solid black;
background-position: 42% 15%;
}
<div class="back"></div>
I'm trying to place an image inside of a div, but when I do so it doesn't display at all. I've created the image myself and made the div to fit. Currently with max-width and max-height I can get it to display inside the box but only at a fraction of the size.
My current code is...
HTML
<div id="carousel">
<img src="Images/carousel1.png" alt="#" style="max-height:100%; max-width:100%;">
</div>
CSS
#carousel {
width: 1280px;
height: 300px;
border: 1px, #000;
border-style: solid;
margin: auto;
margin-top: 10px;
}
First, be sure that the path to the image is correct. Check the console and see if you have any errors.
Than, remove the inline style on the img tag and add in the css file:
#carousel img {
width: 100%;
height: auto;
}
You will need to apply the width: 100% and height 100% to your image tag and not only your container div.
check this out : http://codepen.io/anon/pen/jqzXoR
Here is a JSFiddle to show what I mean: http://jsfiddle.net/p4toy2qq/.
The Code is here:
HTML
<div class="container">
<img src="image-of-any-size.jpg" alt="alt" />
</div>
CSS
.container { width: 100px; height: 100px; overflow: hidden; border: black solid 1px; margin: 10px;}
.container img { width: 100%; }
I basically want different sized images to fill out the divs, without the aspect ratio getting messed up. The overflow should be hidden, so the parts outside get 'cropped' off.
Any ideas?
If you have the option to set them as background images you can use:
.container{
background: url('something.jpg');
background-size:cover;
background-position:center center;
}
Note that some older browsers don't support background-size: http://caniuse.com/#search=background-size
there's a method to do this.
.img-container{
position:relative;
width:100px;
height:100px;
display:block;
overflow:hidden;
text-align:center;
}
horizontal img
.img-container > img{
position:absolute;
top:0;
height:100%;
}
vertical img
.img-container > img{
position:absolute;
top:0;
width:100%;
}
demo
If you want to cover the height of the images inside the container, use background-image: auto 100% style instead of img tag and apply the image to the .container element directly.
Working Fiddle
Note: This solution is assuming that all your images have more than 100px of height as you have shown in the fiddle.
Update:
If you want to just cover the image completely inside the container then you can use background-image: cover
Working Fiddle
You could use the new object-fit property (currently webkit only)
1) Set object-fit: cover; on the image to ensure that the aspect ratio is kept, and
2) Set height: 100px to fill the box if the image is < 100px high.
FIDDLE
.container {
width: 100px;
height: 100px;
overflow: hidden;
border: black solid 1px;
margin: 10px;
}
.container img {
width: 100%;
object-fit: cover;
height: 100px;
}
<div class="container">
<img src="http://static.ddmcdn.com/gif/storymaker-best-hubble-space-telescope-images-20092-514x268.jpg" alt="alt" />
</div>
<div class="container">
<img src="http://chennaionline.com/images/gallery/2013/June/20110623010938/Singam2_Suriya_Stills_Photos_Images_10.jpg" alt="alt" />
</div>
<div class="container">
<img src="http://www.moviehdwallpapers.com/wp-content/uploads/2014/10/happy_diwali__sms_images_.jpg" alt="alt" />
</div>
You can read more about this new property in this webplatform article.
From the above article - regarding the 'cover' value:
The whole image is scaled down or expanded till it fills the box
completely, the aspect ratio is maintained. This normally results in
only part of the image being visible.
Also, here is a fiddle from the above article which demonstrates all the values of the object-fit property.
I have a tricky question. Might funny to some people here.
I am trying to overcome html img and use image via css background property.
So, Code is simple:
<a id="logo" href="/"><img src="/logo1.png"></a>
CSS
position: relative;
height: 85px;
width: 200px;
background: url(/logo2.png) no-repeat;
background-size: 200px 200px;
So, I want logo1 from html removed and css image logo2 overtake logo1.
NOTE: No extra divs and classes, Only with that html markup!
Tried everything but i think this is impossible?
Remove the img with display: none and use display: block/inline-block/table-cell to get your height and width.
In this example the red <img> is being removed and replaced with the yellow CSS background image.
Example!
HTML
<a id="logo" href="/"><img src="http://www.placehold.it/200/FF0000"></a>
CSS
a {
position: relative;
height: 85px;
width: 200px;
background: url(http://www.placehold.it/200/FFFF00) no-repeat;
background-size: 200px 200px;
display: block;
}
a img {
display: none;
}
If you want to hide the img tag and replace it with the background image. Use z-index and remove position:relative; from the link and apply it to the img instead. Add display:block; to the link and give it fixed dimensions.
HTML
<h2>Your actual code:</h2>
<a id="logo2" href="/"><img src="http://www.placehold.it/100x100" /></a>
<br>
<h2>You want to hide the img tag and replace it with the background image. Use z-index and replace position:relative; and apply it to the img instead.</h2>
<a id="logo" href="/"><img src="http://www.placehold.it/100x100" /></a>
CSS
#logo, #logo2{
height: 100px;
width: 200px;
display:block;
background: url(http://www.placehold.it/100x100) no-repeat;
background-size: 200px 100px;
z-index:2;
}
#logo img{
z-index:-1;position:relative;
}
DEMO http://jsfiddle.net/a_incarnati/stkrj9eq/
If you want to hide the img, you can use several techniques, also using opacity, visibility:hidden, display:none; etc. Depends what you are trying to achieve.
This is my code:
<div style="width: 75px; height: 75px; text-align: center; overflow: hidden;">
<img src"myimg.png"/>
</div>
I want to crop from left and right my image in this div.
But it only crop a part from right.
I want to do something like this (which works in IE 8-10 too).
Thanks in advance!!!
You can keep your HTML as is and make the image's position:relative and the position left:-50% (or margin-left:-50%).
Your HTML:
<div id="cropper">
<img src="http://lorempixel.com/output/sports-q-c-900-600-3.jpg" />
</div>
Your CSS:
#cropper{
width:450px;
height:600px;
overflow:hidden;
}
img{
position:relative;
left:-50%;
}
Here's the demo.
EDIT
To accurately center the image in any div size, you need to position the image in pixels and not in percentage unless the container is exactly half the size of the image. So the final CSS of an image size of 900x600 pixels would be:
img{
position:relative;
left:-450px;
}
You can use clip-path to crop pretty much anything:
.crop-left {
clip-path: inset(0 50px 0 0);
}
.crop-right {
clip-path: inset(0 0 0 50px);
}
.crop-top {
clip-path: inset(0 0 50px 0);
}
.crop-bottom {
clip-path: inset(50px 0 0 0);
}
Why not set the image as background?
HTML
<div id="mydiv" style="width: 75px; height: 75px; text-align: center; overflow: hidden;">
</div>
CSS
#mydiv
{
background-image:url('myimg.png');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
}
Here this is s small trick to crop a div...
put the div you want to crop inside another div..
set overflow of outer div to hidden
them simply shift the inner div as you want to crop it using margin_left,right,top,down attributes...
<div style="overflow:hidden;">
<div id="myDiv" style="overflow:hidden;margin-top:-30px"></div>
</div>
Simple :)
What you want is not possible with an <img>. However, you can use the "CSS Sprite" trick:
<div style="width: 75px; height: 75px; text-align: center; overflow: hidden;
background: url(myimg.png) no-repeat center center">
</div>
No jsFiddle, sorry, as I don't have your image.
here's a solution proposed a few times here for similar questions:http://codepen.io/gcyrillus/pen/BdtEj
/* see demo : http://codepen.io/gcyrillus/pen/BdtEj , to play with and understand */
parent {
line-height:equals to height;
text-align:center;
}
parent img {
vertical-align:middle;
margin:-100%;
}
It's about clipping your image.You have that old and usefull CSS rule : clip:rect();
http://www.w3.org/wiki/CSS/Properties/clip wich has this purpose.
Or using a trick (cause you enjoy to play with CSS) to reduce virtually image zize to null, so it centers horizontally and vertically no matters it's real size.
http://codepen.io/gcyrillus/pen/BdtEj
You can just set a background image to the div
HTML
<div class='myDiv'></div>
CSS
.myDiv {
width: 75px;
height: 75px;
background: url('myimg.jpg') no-repeat -123px 0px;
}
Adjust -123px to the correct left offset from where cropping should start.
EDIT: jsFiddle
There are more possible solutions for this:
Using a container div and applying negative positioning on the image. Or you can set the image as the background of div which makes you able to use background-position for example.
Below is the DEMO link as per your requirement, which work in ie.
<div class="mainDiv">
<div class="green"></div>
</div>
.mainDiv {
margin:0 auto;
border:1px solid #000;
width:700px;
height:500px;
text-align:center;
}
.mainDiv .green {
width:100px;
height:100px;
background-color:red;
display:inline-block;
}
It's possible with image and any element, css positioning, provided that you know the width of the image.
Add position:relative to the div, and position:absolute on the image together with half the width of the image in a left:-204px;top:0;.
Example fiddle: http://jsfiddle.net/ctXcJ/2/
try margin: 0 auto; instead of text-align.