带标题的图像-如何伸展和居中？

Question

When I had just an image I had a nice working solution -- I could center (in both axis) an image and also stretch it in such way, that it was no bigger than container and no smaller (it preserved the ratio).

Now I would like to add a caption directly under the image in such way, that caption takes the space based on font size, and the image stretch to what is left from the container space. And I am unable to do it.

My previous solution (I left constraint only on height) -- now, not working:

<div style="border: 1px solid;box-sizing: border-box; width: 1000px; padding: 8px; height: 200px; text-align: center; " >
    <span style="display: inline-block; height: 100%; vertical-align: middle;"></span>
    <img style="display:inline-block; max-height:100%; " src="icons/speaking.png" ></img>
    <br/><span style="">TEST</span>
</div>

Other tries, but they work even worse, image is no stretched in any way. table with table-cell

<div style="border: 1px solid;box-sizing: border-box; width: 1000px; padding: 8px; height: 200px; text-align: center; " >
    <div style="display:table;width:100%;height:100%;max-height:100%;">
        <div style="vertical-align:middle;display:table-cell;max-height:100%;">
            <img style="display:inline;max-height:100%;" src="icons/speaking.png" ></img>
        </div>
    </div>
</div>

Or figure -- no difference really:

<div style="border: 1px solid;box-sizing: border-box; width: 1000px; padding: 8px; height: 200px; text-align: center; " >
    <div style="display:table;width:100%;height:100%;max-height:100%;">
        <figure style="vertical-align:middle;display:table-cell;max-height:100%;">
            <img style="max-height:100%" src="icons/speaking.png" ></img>
            <figcaption style="">TEST</figcaption>
        </figure>
    </div>
</div>

IMPORTANT: I don't have a working solution, any solution, but I try to solve this problem without any fixed values except for container. The reason for this is, then when resize occurs, I have set the dimension of the container, and the content scale accordingly.

Big container, the image occupies almost entire height, it cannot fit width to 100%, because the height would be too big (odd look may be the result of my Gimp skills):

Small container, the image is squeezed. Still there is room for text preserved.

The text may look like scaled up (by comparison), but the size of it is the same -- only the image is squeezed, and container is smaller.

Answer 1

If I got you right, you want to set a specific font size to the caption and the image re-size itself to the same width of the caption, maintaining it's aspect ration.

In this case I suggest you to use table a table with two TR and one TD. Put image in first row (TR) and the caption in the second row. Do not define the width of the TABLE, TD or TD. So whatever font size you will give to the caption in the second row, the column will set its width to that size and the image with 100% width will set itself according to the TD size.

For example,

 <Table> <TR> <img style="display:inline-block; max-height:100%; " src="icons/speaking.png" ></img> <TD></TD> </TR> <TR> <TD> <br/><span style="">TEST</span> </TD> </TR> <Table> 

Answer 2

If the browsers you want to support allow you to use flexbox, I think you can achieve it in the following fashion. Instead of using a <img> tag for the image I've opted to use a background-image together with background-position: center center and background-size: contain to center and stretch the image. It might be worthwhile to see if you can implement this using a <img> tag.

I've added display: flex and flex-direction: column on the container .media class. If you add flex-grow: 1 on the .media__image class this will make the image container grow until the entire height is used.

 .media { display: flex; flex-direction: column; width: 200px; height: 200px; } .media__image { flex-grow: 1; background: url('http://placehold.it/150x100') center center no-repeat; background-size: contain; background-color: #f99; } .media__caption { background-color: #9f9; text-align: center; font-family: Helvetica, Arial, sans-serif; padding: 0.5em; color: #333; } 

 <div class="media"> <div class="media__image"></div> <div class="media__caption"> Caption </div> </div> 

See this for three examples using different sized containers, images and fonts.

For background information on using flexbox:

• CSS-Tricks complete guide to Flexbox
• Browser support at caniuse.com
• Flexbox cheatsheet
• A tool to play with flexbox

Answer 3

I am really confused..

Just by adding a simple html tag I have achieved what I think you're talking about how ever your question is very unclear.

<html>
<head>
<style>
span {
font-size: 100px;
}
</style>
</head>
<body>
<center><img src="http://i.imgur.com/S2E4MDu.png"/>
<br/><span style="">TEST</span></center>
</div>
</body>
</html>

This centers the content and the span for me so all that's left to do is add a style in css for span declaring it to the size that you're looking for..

EDIT: I see that you are also having issues with it inside of a container so I went ahead and tested this as well.

.container {
position: relative;
width: 100%;
border: 1px solid red;
}
.container img {
width: 500px;
height: 500px;
}

Simply wrap the container around the image

<div class="container">
<center><img src="http://i.imgur.com/S2E4MDu.png"/>
<br/><span style="">TEST</span></center>
</div>

And we should be set.