Question

我想显示一个在其下方有标题的图片。如果用户调整浏览器大小，图像将调整大小，同时保持其宽高比。图像的宽度不得超过其正常宽度。您可以按比例缩小，但不能超出其实际大小。图像宽度也不得超过500像素，高度不得超过800像素。在调整图像大小时，标题的宽度必须与图像的左侧和右侧对齐。这是我得到的：

Working jsFiddle

代码：

＆＃13;

.furlHtmlCont {
    max-width: 600px;
    max-height: 800px;
    display: inline-block;
    flex-direction: column;
    align-items: flex-start;
    box-shadow: 0 0 8px #c0c0c0;
    border-left: 1px solid #c0c0c0;
    border-right: 1px solid #c0c0c0;
    border-bottom: 1px solid #c0c0c0;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
}

.furlHtmlFooter {
    display: table-caption;
    caption-side: bottom;
    padding: 5px 10px 5px 10px;
}

.furlHtmlImg {
    max-width: 100%;
    max-height: 300px;
    cursor: pointer;
}

＆＃13;

<div class="furlHtmlCont">
  <div style="display: flex; flex-direction: column">
    <img class="furlHtmlImg" src="http://dhr7l999iqsnw.cloudfront.net/wp-content/uploads/Two_Male_Giraffes_Fighting_600.jpg">
    <div class="furlHtmlFooter">
      <div class="furlHtmlTitle">Caption goes here</div>
      <div class="furlHtmlDesc">Long description goes here. It should wrap at the image's right edge even as the user resizes the image.
      </div>
    </div>
  </div>
</div>

＆＃13;

我遇到的问题是图像超出了正常宽度并被拉伸。

更新：

虽然我接受了下面的答案，但它实际上不起作用。高度必须限制在800px。

Answer 1

.furlHtmlCont {
    max-width: 600px;
    max-height: 100%;
    display: inline-block;
    flex-direction: column;
    align-items: flex-start;
    box-shadow: 0 0 8px #c0c0c0;
    border-left: 1px solid #c0c0c0;
    border-right: 1px solid #c0c0c0;
    border-bottom: 1px solid #c0c0c0;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    text-align:justify;
}

.furlHtmlFooter {
    display: table-caption;
    caption-side: bottom;
    padding: 5px 10px 5px 10px;
}

.furlHtmlImg {
    max-width: 100%;
    max-height: 100%;
    cursor: pointer;
    object-fit: scale-down;
}

如上所述更改css。如果这是你想要的，请告诉我..

Answer 2

我认为这应该有用。

<强> CSS：

.furlHtmlCont {
    width: 100%;
    height: 100%;
    max-width: 500px;
    max-height: 800px;
    display: inline-block;
    flex-direction: column;
    align-items: flex-start;
    box-shadow: 0 0 8px #c0c0c0;
    border-left: 1px solid #c0c0c0;
    border-right: 1px solid #c0c0c0;
    border-bottom: 1px solid #c0c0c0;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
}

.furlHtmlFooter {
    display: table-caption;
    caption-side: bottom;
    padding: 5px 10px 5px 10px;
}

.furlHtmlImg {
    width:100%;
    height:auto;
    cursor: pointer;
}

JSFiddle： here

Answer 3

我们走了！

＆＃13;

html,
body {
  height: 100%;
}

.container {
  width: 100%;
  max-width: 500px;
  max-height: 800px;
  height: 100%;
}

.image-container {
  width: 100%;
  height: 100%;
}

img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
}

＆＃13;

<div class="container">
  <div class="image-container">
    <img src="http://dhr7l999iqsnw.cloudfront.net/wp-content/uploads/Two_Male_Giraffes_Fighting_600.jpg">
    <div>
      <div>Caption goes here</div>
      <div>Long description goes here. It should wrap at the image's right edge even as the user resizes the image.
      </div>
    </div>
  </div>
</div>

＆＃13;

Answer 4

列出的所有解决方案均无法将高度限制为某个最大值。这是解决方案（我还决定将高度限制为最大400px而不是800px）：

HTML：

<div class="furlHtmlCont">
    <div style="display: table;">
        <img class="furlHtmlImg">
        <div class="furlHtmlFooter">
            <div class="furlHtmlTitle">Caption goes here</div>
            <div class="furlHtmlDesc">This is where the long description goes and its with should not exceed the width of the image. No clipping either.</div>
        </div>
    </div>
</div>

的CSS：

.furlHtmlCont {
        max-width: 600px;
        display: inline-block;
        box-shadow: 0 0 8px #c0c0c0;
        border-left: 1px solid #c0c0c0;
        border-right: 1px solid #c0c0c0;
        border-bottom: 1px solid #c0c0c0;
        border-bottom-left-radius: 3px;
        border-bottom-right-radius: 3px;
    }

    .furlHtmlFooter {
        display: table-caption;
        caption-side: bottom;
        padding: 5px 10px 5px 10px;
    }

    .furlHtmlImg {
        max-width: 100%;
        max-height: 400px;
        cursor: pointer;
    }

https://jsfiddle.net/Deepview/vy6h0rdj/5/

Answer 5

你应该有一张确切的宽度和高度的图像。每次使用图像时，您都无法指定宽度和高度，因为这样会拉伸和扭曲图像，因此请将图像放入正确的尺寸以便正常工作。

如何在保持宽高比

5 个答案: