html – 使元素的宽度与动态大小的图像相同？

概述我有一个灵敏的幻灯片式布局，每个图像下方都有字幕。 我试图获得与图像宽度相同的标题。问题是图像被缩放以适应垂直浏览器，我的标题是在缩放之前获取图像的宽度。 Fiddle #big_container { display:block; position:relative; width:100%; padding-bottom:40%; white-space:nowrap; overf 我有一个灵敏的幻灯片式布局，每个图像下方都有字幕。

我试图获得与图像宽度相同的标题。问题是图像被缩放以适应垂直浏览器，我的标题是在缩放之前获取图像的宽度。

Fiddle

#big_container {  display:block;	position:relative;	wIDth:100%;	padding-bottom:40%;	white-space:nowrap;	overflow-x:scroll;	overflow-y:hIDden;}    #big_container>div {	position:absolute;	top:0;	right:0;	bottom:0;	left:0;}.little_container {	display:inline-block;	height:100%;	wIDth:100%;	text-align:center;}#big_container figure {  display:inline-block;	height:100%;	@R_403_5553@:0;}figure img {	max-height:calc(100% - 40px); /* subtract height of caption */}figcaption {	display:block;	wIDth:100%;	text-align:left;	Box-sizing:border-Box;	@R_403_5553@:0;	padding:10px;	line-height:20px;	background-color:#ddd;}

<div ID="big_container">  <div>  <div >      <figure>        <img src="http://placekitten.com/500/440">        <figcaption>          have a kitty!!1        </figcaption>      </figure>  </div>    <div >      <figure>        <img src="http://placekitten.com/450/400">        <figcaption>          moar kitty!        </figcaption>      </figure>  </div>    <div >      <figure>        <img src="http://placekitten.com/300/440">        <figcaption>          too many kitty..        </figcaption>      </figure>  </div>    </div></div>

如何根据流体图像的宽度进行缩放？
我希望得到一个纯粹的CSS解决方案。

更新
原来我以上的尝试partially works in chrome and opera,but exhibits some odd behavior。
我没有发现关于这个问题的任何错误报告，但我不禁想知道这是否可能被认为是浏览器中的错误。

为了清楚起见，以下简要概述我的具体要求：

>标题元素的宽度必须与图像的宽度相同(可以将标题文字左右对齐到图像的边缘)
>图像不得裁剪或拉伸
>图像和标题必须都适合其容器(可能是流体)，使用尽可能多的空间。
>以上规则应适用于任何维度的图像
>仅CSS(与旧浏览器的兼容性不是主要问题，但它是一个加号)

可以更改HTML标记。

解决方法 更新

根据您为此问题设置的确切要求，它不能仅用CSS解决。

这是我能够想出来的最好的。

Fiddle demo 1(固定高度为文字，图像完全可见)
Fiddle demo 2(半透明可缩放文字顶部的动画图像)

我主要使用的技巧是拥有一个隐藏的img来弥补空间，然后是一个背景图像，以保持比例缩放到最大宽度/高度。

为了方便，我添加了内联样式的背景图像，因此可以在HTML内部处理内容。

为了使其完美，需要一个脚本，计算标题的内容并调整图像/标题的缩小/高度。

片段演示1

HTML,body {  @R_403_5553@: 0;  white-space: nowrap;  overflow-y: hIDden;}.container {  display: inline-block;  white-space: normal;  wIDth: 100%;}.wrap {  @R_403_5553@: 0 auto;  display: table;}.image {  display: table-cell;  background-position: center bottom;  background-repeat: no-repeat;  background-size: contain; }.image img {  visibility: hIDden;  max-wIDth: 100vw;  min-wIDth: 100%;  height: calc(100vh - 80px);}.caption {  display: table-caption;  caption-sIDe: bottom;  height: 40px;  line-height: 22px;  padding: 8px;  background-color: #ddd;  overflow: hIDden;}.right {  text-align: right; }

<div >  <div >    <div  >      <img src="http://placekitten.com/450/300">    </div>    <div >      moar kitty!      moar kitty!      moar kitty!    </div>  </div></div><div >  <div >    <div  >      <img src="http://placekitten.com/500/440">    </div>    <div >      have a kitty!!1      have a kitty!!1      have a kitty!!1      have a kitty!!1      have a kitty!!1      have a kitty!!1      have a kitty!!1    </div>  </div></div><div >  <div >    <div  >      <img src="http://placekitten.com/300/440">    </div>    <div >      too many kitty..      too many kitty..      too many kitty..    </div>  </div></div>

片段演示2

HTML,body {  @R_403_5553@: 0;  white-space: nowrap;  overflow-y: hIDden;}.container {  position: absolute;  height: 100%;  display: inline-block;  white-space: normal;  wIDth: 100%;  background: white;  opacity: 0;}.wrap {  @R_403_5553@: 0 auto;  display: table;}.image {  display: table-cell;  background-position: center bottom;  background-repeat: no-repeat;  background-size: contain; }.image img {  visibility: hIDden;  max-wIDth: 100vw;  min-wIDth: 100%;  height: 100vh;}.caption-wrap {  display: table-caption;  caption-sIDe: bottom;  position: relative;}.caption {  position: absolute;    left: 0;  right: 0;  bottom: 100%;  height: auto;  line-height: 22px;  padding: 8px;  background-color: rgba(0,0.6);  color: white;}.right {  text-align: right; }.center {  text-align: center; }.container:nth-child(3) {  animation: xfade 12s 0s infinite;}.container:nth-child(2) {  animation: xfade 12s 4s infinite;}.container:nth-child(1) {  animation: xfade 12s 8s infinite;}@keyframes xfade{  17% {    opacity:1;  }  45% {    opacity:0;  }  92% {    opacity:0;  }}

<div >  <div >    <div  >      <img src="http://placekitten.com/450/300">    </div>    <div >      <div >        moar kitty!        text .. right aligned      </div>    </div>  </div></div><div >  <div >    <div  >      <img src="http://placekitten.com/500/440">    </div>    <div >      <div >        have a kitty!!1        have a kitty!!1        text .. left aligned      </div>    </div>  </div></div><div >  <div >    <div  >      <img src="http://placekitten.com/300/440">    </div>    <div >      <div >        text .. centered      </div>    </div>  </div></div>

总结

以上是内存溢出为你收集整理的html – 使元素的宽度与动态大小的图像相同？全部内容，希望文章能够帮你解决html – 使元素的宽度与动态大小的图像相同？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。