CSS-强制图像具有相同的跨度宽度和高度

Question

I have put an image on a span like this:

 word_span.append('<a id="imagelink" href="'+ image.link +'" " target="_blank"><img  src="' + image.src +'" border="2px"    /></a>')

The css code for span element is like this:

span.m10 {

height:90px;
width:90px;

}

What I need to do is to force image to be contained in the dimensions of the span. Ι've noticed that the image is not displayed with the dimensions of the span, but keeps the proportion of the original size. It follows just the width of the span but not the height.

Why might this happen?

Thank you in advance.

Answer 1

The span element is an inline element in HTML. You can not specify a width and height for an inline element.

With that said, you can make the span behave like an inline-block like so

.m10 {
    display: inline-block;
    width: 90px;
    height: 90px;
}

Then you tell the image inside the span to use the full width available

.m10 img {
    width: 100%;
}

You might want to consider just letting the span display as a block element instead. IE does not support inline elements being displayed as inline-block . Though, then you might aswell change the span to a div and save you some time.

Answer 2

Have you tried using something on the image in your CSS to constrain the image to be only 100% width of the parent? Such as:

span.m10 > a > img{
 max-width: 100%;
 height: auto;
}

This would mean the image would never go beyond the parent container

Answer 3

To change image proportions use background for span (div) as described below

div
{
    background-image:url('image.gif');
    background-repeat:no-repeat;
    background-size:100% 100%;
}

Answer 4

You have to make your span display:block; to make it behave like a block container.

Try this

span.m10 {
    height:90px;
    width:90px;
    display:block;
}

 #imagelink {
    display:block;
    width:100%;
    height:100%;
}

 .m10 img {
    width: 100%;
    height:100%;
}

DEMO FIDDLE