使元素的宽度与动态大小的图像相同？ [英] Make element same width as dynamically sized image?

查看：143 发布时间：2017/2/6 18:43:28 html css

本文介绍了使元素的宽度与动态大小的图像相同？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个响应式幻灯片类型的布局，每个图片下面都有字幕。

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

  #big_container {display：block;位置：相对; width：100％;填充底部：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;高度：100％; width：100％; text-align：center;}＃big_container figure {display：inline-block;高度：100％; margin：0;} figure img {max-height：calc（100％ -  40px）; / *减去字幕的高度* /} figcaption {display：block; width：100％; text-align：left; box-sizing：border-box; margin：0; padding：10px; line-height：20px; background-color：#ddd;}

 < div id =big_container> < div> < div class =little_container> < figure> < img src =http://placekitten.com/500/440> < figcaption>有一个小猫！1< / figcaption> < / figure> < / div> < div class =little_container> < figure> < img src =http://placekitten.com/450/400> < figcaption>驴小猫！ < / figcaption> < / figure> < / div> < div class =little_container> < figure> < img src =http://placekitten.com/300/440> < figcaption>太多的小猫。< / figcaption> < / figure> < / div> < / div>< / div>

制作一个基于流体图像宽度进行缩放的字幕？

我希望有一个纯CSS解决方案。

更新

原来我上面的尝试部分在Chrome和歌剧中工作，但表现出一些奇怪的行为。
我没有找到关于这个主题的任何错误报告，但我不禁想知道这是否可能被认为是浏览器中的错误。

为了清楚起见，下面简要概述了我的确切需求：

Caption元素必须相同

图片不得裁剪或延伸

图片和字幕必须都能放在他们的容器中维

仅限CSS（与旧浏览器的兼容性不是主要关注，但它是一个加号）

根据您为此问题设置的确切要求，无法使用CSS解决。

Fiddle demo 1 （文字固定高度，图片完全可见）

Fiddle demo 2 （带动画的图像顶部的半透明可缩放文本）

我主要使用的技巧是隐藏 img 以补偿空间，然后使用 background-image 缩放到最大宽度/高度，并保持比例。

为了方便，我添加了内联样式 background-image ，因此可以在html内处理内容。

为了完美，需要一个脚本来计算字幕的内容，并调整图片/字幕的缩小/高度。

demo 1

< pre class =snippet-code-css lang-css prettyprint-override>

 html，body {margin：0; white-space：nowrap; overflow-y：hidden;}。container {display：inline-block;白空间：正常; width：100％;}。wrap {margin：0 auto; display：table;}。image {display：table-cell;背景位置：中心底;背景重复：无重复; background-size：包含; } .image img {visibility：hidden; max-width：100vw;最小宽度：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 class =container < div class =wrap> < div class =imagestyle =background-image：url（'http://placekitten.com/450/300'）> < img src =http://placekitten.com/450/300> < / div> < div class =caption right>驴小猫！驴小猫！驴小猫！ < / div> < / div>< / div>< div class =container> < div class =wrap> < div class =imagestyle =background-image：url（'http://placekitten.com/500/440'）> < img src =http://placekitten.com/500/440> < / div> < div class =caption>有一个小猫!! 1有一个小猫！1有一个小猫！1有一个小猫！1有一个小猫！1有一个小猫！1有一个小猫！1< / div> < / div>< / div>< div class =container> < div class =wrap> < div class =imagestyle =background-image：url（'http://placekitten.com/300/440'）> < img src =http://placekitten.com/300/440> < / div> < div class =caption>太多的小猫...太多的小猫...太多的小猫...< / div> < / div>< / div>

  html，body {margin：0; white-space：nowrap; overflow-y：hidden;}。container {position：absolute;高度：100％; display：inline-block;白空间：正常; width：100％;背景：白色; opacity：0;}。wrap {margin：0 auto; display：table;}。image {display：table-cell;背景位置：中心底;背景重复：无重复; background-size：包含; } .image img {visibility：hidden; max-width：100vw;最小宽度：100％; height：100vh;}。caption-wrap {display：table-caption; caption-side：bottom; position：relative;}。caption {position：absolute;左：0; right：0;底部：100％; height：auto; line-height：22px; padding：8px; background-color：rgba（0,0,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 12s 8s infinite;} @ keyframes xfade {17％{opacity：1; } 45％{opacity：0; } 92％{opacity：0; }}

 < div class =container < div class =wrap> < div class =imagestyle =background-image：url（'http://placekitten.com/450/300'）> < img src =http://placekitten.com/450/300> < / div> < div class =caption-wrap> < div class =caption right>驴小猫！ text .. right aligned< / div> < / div> < / div>< / div>< div class =container> < div class =wrap> < div class =imagestyle =background-image：url（'http://placekitten.com/500/440'）> < img src =http://placekitten.com/500/440> < / div> < div class =caption-wrap> < div class =caption>有一个小猫！1有一个小猫！1文本..左对齐< / div> < / div> < / div>< / div>< div class =container> < div class =wrap> < div class =imagestyle =background-image：url（'http://placekitten.com/300/440'）> < img src =http://placekitten.com/300/440> < / div> < div class =caption-wrap> < div class =caption center> text .. centered< / div> < / div> < / div>< / div>

I have a responsive slideshow-type layout with captions below each image.

I'm attempting to get the caption to be the same width as the image. The problem is that the image is scaled to fit in the browser vertically, and my captions are the getting the width of the image prior to scaling.

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%;
	margin:0;
}

figure img {
	max-height:calc(100% - 40px); /* subtract height of caption */
}

figcaption {
	display:block;
	width:100%;
	text-align:left;
	box-sizing:border-box;
	margin:0;
	padding:10px;
	line-height:20px;
	background-color:#ddd;
}

<div id="big_container">
  <div>

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

How can I make a caption which is scaled based on the width of a fluid image?
I'm hoping for a pure-css solution.

Update
It turns out my above attempt partially works in chrome and opera, but exhibits some odd behavior. I haven't found any bug reports on the subject, but I can't help wondering if this might be considered a bug in the browser.

For clarity, here's a brief outline of my exact requirements:

Caption element must be the same width as the image (it'd be nice to be able to left or right align the caption text to the edge of the image)
Image must not be cropped or stretched
Image and caption must both fit in their container (which may be fluid), using as much room as possible.
Above rules should hold true for images of any dimension
CSS only (compatibility with old browsers not a major concern, but it is a plus)

The html markup can be changed.

解决方案

Updated

Based on the exact requirements you set for this question, it can't be solved with CSS only.

This is the best I was able to come up with.

Fiddle demo 1 (fixed height for text, image fully visible)
Fiddle demo 2 (semitransparent scaleable text on top of image with animation)

The trick I mainly used is having a hidden img to make up for the space and then a background-image to scale to maximum width/height with kept ratio.

I added the inline style background-image for convenience, so content can be handled within the html.

To make it perfect, a script is needed, which calculate the caption's content and adjust the image's/caption's reduction/height.

Snippet demo 1

html, body {
  margin: 0;
  white-space: nowrap;
  overflow-y: hidden;
}
.container {
  display: inline-block;
  white-space: normal;
  width: 100%;
}
.wrap {
  margin: 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 class="container">
  <div class="wrap">
    <div class="image" style="background-image: url('http://placekitten.com/450/300')">
      <img src="http://placekitten.com/450/300">
    </div>
    <div class="caption right">
      moar kitty!
      moar kitty!
      moar kitty!
    </div>
  </div>
</div>

<div class="container">
  <div class="wrap">
    <div class="image" style="background-image: url('http://placekitten.com/500/440')">
      <img src="http://placekitten.com/500/440">
    </div>
    <div class="caption">
      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 class="container">
  <div class="wrap">
    <div class="image" style="background-image: url('http://placekitten.com/300/440')">
      <img src="http://placekitten.com/300/440">
    </div>
    <div class="caption">
      too many kitty..
      too many kitty..
      too many kitty..
    </div>
  </div>
</div>

Snippet demo 2

html, body {
  margin: 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 {
  margin: 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,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 class="container">
  <div class="wrap">
    <div class="image" style="background-image: url('http://placekitten.com/450/300')">
      <img src="http://placekitten.com/450/300">
    </div>
    <div class="caption-wrap">
      <div class="caption right">
        moar kitty!
        text .. right aligned
      </div>
    </div>
  </div>
</div>

<div class="container">
  <div class="wrap">
    <div class="image" style="background-image: url('http://placekitten.com/500/440')">
      <img src="http://placekitten.com/500/440">
    </div>
    <div class="caption-wrap">
      <div class="caption">
        have a kitty!!1
        have a kitty!!1
        text .. left aligned
      </div>
    </div>
  </div>
</div>

<div class="container">
  <div class="wrap">
    <div class="image" style="background-image: url('http://placekitten.com/300/440')">
      <img src="http://placekitten.com/300/440">
    </div>
    <div class="caption-wrap">
      <div class="caption center">
        text .. centered
      </div>
    </div>
  </div>
</div>

这篇关于使元素的宽度与动态大小的图像相同？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

使元素的宽度与动态大小的图像相同？ [英] Make element same width as dynamically sized image?

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录关闭

使元素的宽度与动态大小的图像相同？ [英] Make element same width as dynamically sized image?

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录 关闭

登录关闭