在保持纵横比的同时在图像边框内定位标题

Question

我正在处理可能有或没有标题的图像。

我通过以下方式在每张图片周围创建了一个宝丽来效果：

<div style="text-align:center">
<img src="daenerys.png" style="border: 10px solid #FAFAFA;border-bottom: 45px solid #FAFAFA;-webkit-box-shadow: 3px 3px 3px #9E9E9E; -moz-box-shadow: 3px 3px 3px #9E9E9E;box-shadow: 3px 3px 3px #9E9E9E;">
</div>

结果看起来可以接受：

但是这不能像我想要的那样支持字幕。我需要在宝丽来效果的白色边框内的图像下面写一个标题。

我将代码更改为：

<div style="text-align:center;background-color: #ffffff;display: inline-block;padding: 10px;-webkit-box-shadow: 3px 3px 3px #9E9E9E; -moz-box-shadow: 3px 3px 3px #9E9E9E;box-shadow: 3px 3px 3px #9E9E9E;">
<img src="daenerys.png" style="display: block;margin: 0 auto;margin-bottom: 20px;width: 100%;">
<div class="cxl cgy"></div>
</div>

这给了我一张拉伸的图像：

如何确保图像分辨率和宽高比保持不变，同时确保文本根据需要动态增长图像下的空白区域？我已经看了this SO post寻求帮助，但无济于事。

总体目标是保持宝丽来的外观（即使对于没有标题的图像），并使用图像下方的空白区域来显示带有字幕的图像的文本。

Answer 1

我找到了一个保持纵横比的解决方案：

{{1}}

这是预览链接：https://codepen.io/ziruhel/pen/RjwmQg

Answer 2

为了创建你想要创建polariod的方式，有一个新的html标签，可以在一个元素中包含标题和图像。

结构就是这样：

-- Figure
---- img
---- figcaption

我已经制作了一个jsfiddle，记住你的结构和代码。

您可以使用卡片样式设置图形标记的样式，并根据需要保留标题文本。

jsfiddle链接：https://jsfiddle.net/vmt5w1u8/

SCSS代码：

figure {
text-align: center;
background-color: #ffffff;
display: inline-block;
padding: 10px;
height: 100%;
-webkit-box-shadow: 3px 3px 3px #9e9e9e;
-moz-box-shadow: 3px 3px 3px #9e9e9e;
box-shadow: 3px 3px 3px #9e9e9e;

img {
    display: block;
    margin: 0 auto;
    margin-bottom: 20px;
    width: 100%;
    height: 100%;
}
figcaption {
    text-align: center;
}
}

图标记参考链接：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figure

Answer 3

您获得图像拉伸的原因是因为您没有为div设置修复/最大宽度，没有宽度指定文本会随着宽度变长而拉伸图像

尝试添加：

div{
    /*width:300px; use max-width if responsive*/
    max-width: 300px; /*maximum width the image will stretch*/
    box-sizing: border-box; /*include padding as part of the specified max-width above*/
}

示例：

＆＃13;

＆＃13;

div {
  max-width: 300px;
  box-sizing: border-box;
}

＆＃13;

<div style="text-align:center;background-color: #ffffff;display: inline-block;padding: 10px;-webkit-box-shadow: 3px 3px 3px #9E9E9E; -moz-box-shadow: 3px 3px 3px #9E9E9E;box-shadow: 3px 3px 3px #9E9E9E;">
  <img src="https://dummyimage.com/300x250/4168a3/fff" style="display: block;margin: 0 auto;margin-bottom: 20px;width: 100%;">
  <div class="cxl cgy">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis,
    sem. Nulla consequat massa quis enim.

  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 4

为图像设置最大宽度可能会有所帮助。将调整图像大小以适应纵横比，而不会超出所需宽度。并且文本内容也将相应地包装。

<强> CSS：

.img-wrapper {
  max-width: 500px;
  padding: 10px;
  background: #fff;
  text-align: center;
  position: relative;
  box-sizing: border-box;
}

.image {
  width: 100%;
}

.text {
  word-wrap: break-word;
}

这是Fiddle。 希望这会有所帮助：）

Answer 5

您不必设置max-width，只需将.image宽度设置为width: 100%和height: auto

小提琴：http://jsfiddle.net/MBLZx/2312