how to make an empty span collapse

Question

I have this fiddle I'm playing with to crop and center an image. It works quite well, but I would need the wrapping div.test to have the same width of the image. This is not possible: if I set the width of the img to 300px the magic does not work. I think it's because of the span I use to center the image. I think it leaves a kind of space footprint (maybe the space between letters or words?). So: how to make its space effects "invisibles"?

Update

My original purpose was: resize the image horizontally and crop-and-center vertically + compatibility from IE8 >. All done with CSS. The solution linked above is almost close to the solution, but not perfect (the little space on the left). That's why I asked for a fix on it.

Is there a reason you want to use this `span` technique versus something a bit more tried and true? (http://stackoverflow.com/a/11552460/949328) — hiattp, Oct 13 '13 at 16:46
interesting! But I need to adapt it horizontally and crop it vertically. I think the link you suggested only works when you want to crop both vertically and horizontally. Right? — Bertuz, Oct 13 '13 at 16:55
Ok I'm trying to get a sense for your end goal, you want the image to match the width of the div but crop from top and bottom, right? Would this do it? http://jsfiddle.net/8TkME/5/ — hiattp, Oct 13 '13 at 17:18
Yes, you got it! But the problem is: that solution depends on a specific margin value, and I want to find a generic solution for every height. My solution works but it leaves a "space". Maybe it's impossible just with css — Bertuz, Oct 13 '13 at 17:27
What what should that generic solution _do_? Its unclear from your fiddle what the goal is, since everything is hard-coded there as well. How much do you want to crop in a "generic" solution, and from where? — hiattp, Oct 13 '13 at 17:54
We're going out of topic but: consider an image of 360px(width) and 500px (height). I want it: 1. resized down to 300px for its width. 2. cropped to 200px for its height. The visible part should be the central one (it should be crop equally on the top and on the bottom). Sorry for not depicting this but I don't have proper tools to do it right now. My fiddle does it, but it leaves a "space" on the left — Bertuz, Oct 13 '13 at 19:20

Overflow Stack · Accepted Answer · 2013-10-14T02:08:00.733

1

I am not positive if I am understanding your dilemma, however, I think something like this may be what you are looking for. Here is the link to JSFiddle (http://jsfiddle.net/bUrmK/2/).

HTML:

<div class="test">
    <div class="before">
</div>

CSS:

.test {
    background-color: grey;
    overflow: hidden;
    width: 300px;
}
.before {
    background-image: url("http://www.news.giudicarie.com/images/Inaugurazione_Muse_Museo_della_Scienze_di_Trento.JPG");
    width: 100%;
    height: 100px;
    background-position: center;
    background-size: cover;
    /*This will allow for LTE IE-8*/
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="http://www.news.giudicarie.com/images/Inaugurazione_Muse_Museo_della_Scienze_di_Trento.JPG", sizingMethod='scale');
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src=""http://www.news.giudicarie.com/images/Inaugurazione_Muse_Museo_della_Scienze_di_Trento.JPG", sizingMethod='scale')";
}

edited Oct 14 '13 at 02:08

answered Oct 13 '13 at 19:27

Overflow Stack

833
5
9

really cool and neat solution! But it's not compatible with IE 8 https://developer.mozilla.org/en-US/docs/Web/CSS/background-size#Browser_compatibility which I need – Bertuz Oct 13 '13 at 20:42
1

Updated the original post with the necessary fixes for you. You should be all set now. – Overflow Stack Oct 13 '13 at 21:19
perfect! May I ask you where I can find some article/docs about ms filters? They seem to be a good solution for a lot of CSS3 IE compatibility issues! – Bertuz Oct 13 '13 at 21:42
1

I would use MSDN. Here is a link that will help you, http://msdn.microsoft.com/en-us/library/ms530752%28v=vs.85%29.ASPX. – Overflow Stack Oct 13 '13 at 21:45

score 1 · Answer 2 · answered Oct 13 '13 at 19:40

1

I get it now, you can use a single div:

HTML

<div class="cropped"></div>

CSS

.cropped{
  background-image: url("http://www.news.giudicarie.com/images/Inaugurazione_Muse_Museo_della_Scienze_di_Trento.JPG");
  width: 300px;
  height: 200px;
  background-position: center;
  background-size: cover;
}

answered Oct 13 '13 at 19:40

hiattp

2,326
1
20
23

as Spencer even suggested, this solution is perfect, but I need it to be compatible with IE8. – Bertuz Oct 13 '13 at 20:44

how to make an empty span collapse

Update

2 Answers2