调整图片大小以符合< td>或div [英] Resizing image to fit <td> or div

问题描述

我要创建以下布局：

其中蓝色块是图像，红色和绿色块包含垂直居中的文本。容器需要具有 position：fixed ，图片的大小是动态调整的，因此图片的高度设置为容器的高度，红色和绿色框的高度相等，

  body {padding：0; margin：0; border：0;}。container {height：15vh; width：100vw;位置：固定; background-color：red;}。imgContainer {height：100％; float：left;}。imgContainer img {height：100％;}。textContainer {height：100％;背景颜色：黄色; text-align：right; display：table; table-layout：fixed; float：right;}。row1 {height：50％; width：100％; display：table-row;}。row2 {height：50％; background-color：blue; display：table-row;} span {display：table-cell; vertical-align：middle;}  

 < div class = container> < div class =imgContainer> < img src =http://ingridwu.dmmdmcfatter.com/wp-content/uploads/2015/01/placeholder.png/> < / div> < div class =textContainer> < div class =row1> < span> Lorem ipsum dolor sit amet，consectetur adipiscing elit。< / span> < / div> < div class =row2> < span>更多文字。< / span> < / div> < / div>< / div>  

对于图像，但我不知道如何获得红色和绿色divs以满意地填充剩余的宽度。

我的第二次尝试是基于表，但再次，我似乎无法获得正确的宽度：

  body {background-color：red; padding：0; border：0; margin：0;} div {background-color：yellow; height：15vh; width：100vw; position：fixed;} table {height：100％; width：100％; background-color：blue; border-collapse：collapse; table-layout：fixed;} tbody {height：100％; width：100％;背景颜色：紫色;} tr {高度：50％; width：100％; background-color：green; padding：0;} tr：last-child {background-color：yellow;} td {height：100％; padding：0; white-space：nowrap;} td：last-child {max-width：100％;} img {max-height：100％; display：block;}  

 < div& < table> < tbody> < tr> < td rowspan =2> < img src =http://ingridwu.dmmdmcfatter.com/wp-content/uploads/2015/01/placeholder.png/> < / td> < td> Lorem ipsum dolor sit amet，consectetur adipiscing elit。 < / td> < / tr> < tr> < td>更多文字。 < / td> < / tr> < / tbody> < / table>< / div>  

有问题确保红色和绿色部分保持在总高度的50％，而不考虑内容。

如何获得这些工作？

解决方案

你不说你的目标市场是什么，大多数我的工作我只需要担心最新的浏览器版本，这个答案使用新的CSS flexbox 。如果您需要与旧版浏览器兼容，请参阅下面的第二组代码。

  body {padding：0; margin：0; border：0;}。container {height：15vh; width：100vw;位置：固定;显示：flex; flex-direction：row; justify-content：space-between;}。imgContainer {height：100％;} imgContainer img {height：100％;}。 width：100％;}。row1 {background-color：red;}。row2 {background-color：green;}。row1，.row2 {height：50％;显示：flex; flex-direction：column; justify-content：center; align-items：flex-end; overflow：hidden;}  
 
 < div class = > < div class =imgContainer> < img src =http://ingridwu.dmmdmcfatter.com/wp-content/uploads/2015/01/placeholder.png/> < / div> < div class =textContainer> < div class =row1> < span> Lorem ipsum dolor sit amet，consectetur adipiscing elit。< / span> < / div> < div class =row2> < span>更多文字。< / span> < / div> < / div>< / div>  
 

解决方案，在旧版本的浏览器，除了IE9和以下，其中文本将不会正确垂直居中。如果这是一个问题，您可以找到适用于此页，但不知道所有的限制，我无法选择正确的解决方案。

  body {padding：0; margin：0; border：0;}。container {height：15vh; width：100vw; position：fixed;}。imgContainer {height：100％; float：left;}。imgContainer img {height：100％;}。textContainer {height：100％;}。 background-color：red;}。row2 {height：50％; background-color：green;} span {right：0; / * right-justify * /}。row1> span {position：absolute; top：25％; / *将顶部25％放在.container内 - 第一个非静态祖先元素* / transform：translateY（-50％）; / *微调行高一半的高度* /}。row2> span {position：absolute;顶部：75％; transform：translateY（-50％）;}  

  div class =container> < div class =imgContainer> < img src =http://ingridwu.dmmdmcfatter.com/wp-content/uploads/2015/01/placeholder.png/> < / div> < div class =textContainer> < div class =row1> < span> Lorem ipsum dolor sit amet，consectetur adipiscing elit。< / span> < / div> < div class =row2> < span>更多文字。< / span> < / div> < / div>< / div>  

I want to create the following layout:

where the blue block is an image and the red and green blocks contain vertically centered text. The container needs to have position:fixed, the image is sized dynamically so that its height is set to the height of the container and the red and green boxes are of equal height and fill the remainder of the container horizontally.

I initially tried using divs:

body {
  padding: 0;
  margin: 0;
  border: 0;
}
.container {
  height: 15vh;
  width: 100vw;
  position: fixed;
  background-color: red;
}
.imgContainer {
  height: 100%;
  float: left;
}
.imgContainer img {
  height: 100%;
}
.textContainer {
  height: 100%;
  background-color: yellow;
  text-align: right;
  display: table;
  table-layout: fixed;
  float: right;
}
.row1 {
  height: 50%;
  width: 100%;
  display: table-row;
}
.row2 {
  height: 50%;
  background-color: blue;
  display: table-row;
}
span {
  display: table-cell;
  vertical-align: middle;
}

<div class="container">
  <div class="imgContainer">
    <img src="http://ingridwu.dmmdmcfatter.com/wp-content/uploads/2015/01/placeholder.png" />
  </div>
  <div class="textContainer">
    <div class="row1">
      <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
    </div>
    <div class="row2">
      <span>More text.</span>
    </div>
  </div>
</div>

This worked fine for the image but I couldn't figure out how to get the red and green divs to fill the remaining width satisfactorily.

My second attempt was based around tables but, again, I don't seem to be able to get the widths correct:

body {
  background-color: red;
  padding: 0;
  border: 0;
  margin: 0;
}
div {
  background-color: yellow;
  height: 15vh;
  width: 100vw;
  position: fixed;
}
table {
  height: 100%;
  width: 100%;
  background-color: blue;
  border-collapse: collapse;
  table-layout: fixed;
}
tbody {
  height: 100%;
  width: 100%;
  background-color: purple;
}
tr {
  height: 50%;
  width: 100%;
  background-color: green;
  padding: 0;
}
tr:last-child {
  background-color: yellow;
}
td {
  height: 100%;
  padding: 0;
  white-space: nowrap;
}
td:last-child {
  max-width: 100%;
}
img {
  max-height: 100%;
  display: block;
}

<div>
  <table>
    <tbody>
      <tr>
        <td rowspan="2">
          <img src="http://ingridwu.dmmdmcfatter.com/wp-content/uploads/2015/01/placeholder.png" />
        </td>
        <td>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </td>
      </tr>
      <tr>
        <td>
          More text.
        </td>
      </tr>
    </tbody>
  </table>
</div>

I have also had problems ensuring that both red and green sections remain at 50% of the total height, regardless of content.

How can I get either of these to work? Or is there a completely different approach that can work?

解决方案

You don't say what your target market is, but since in most my work I only have to worry about the latest browser versions, this answer makes use of the new CSS flexbox. If you need compatibility with older browsers, see the 2nd set of code below.

body {
  padding: 0;
  margin: 0;
  border: 0;
}
.container {
  height: 15vh;
  width: 100vw;
  position: fixed;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.imgContainer {
  height: 100%;
}
.imgContainer img {
  height: 100%;
}
.textContainer {
  height: 100%;
  width: 100%;
}
.row1 {
  background-color: red;
}
.row2 {
  background-color: green;
}
.row1,
.row2 {
  height: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  overflow: hidden;
}

<div class="container">
  <div class="imgContainer">
    <img src="http://ingridwu.dmmdmcfatter.com/wp-content/uploads/2015/01/placeholder.png" />
  </div>
  <div class="textContainer">
    <div class="row1">
      <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
    </div>
    <div class="row2">
      <span>More text.</span>
    </div>
  </div>
</div>

Below is a solution that works in older browsers, except IE9 and below where the text will not be properly centered vertically. If that's a concern, you might be able to find something that works on this page, but not knowing all your limitations, I was unable to select the right solution.

body {
  padding: 0;
  margin: 0;
  border: 0;
}
.container {
  height: 15vh;
  width: 100vw;
  position: fixed;
}
.imgContainer {
  height: 100%;
  float: left;
}
.imgContainer img {
  height: 100%;
}
.textContainer {
  height: 100%;
}
.row1 {
  height: 50%;
  background-color: red;
}
.row2 {
  height: 50%;
  background-color: green;
}
span {
  right: 0;  /* right-justify */
}
.row1 > span {
  position: absolute;
  top: 25%;  /* put the top 25% down within .container - the first non-static ancestor element */
  transform: translateY(-50%);  /* nudge the line up half it's height */
}
.row2 > span {
  position: absolute;
  top: 75%;
  transform: translateY(-50%);
}

<div class="container">
  <div class="imgContainer">
    <img src="http://ingridwu.dmmdmcfatter.com/wp-content/uploads/2015/01/placeholder.png" />
  </div>
  <div class="textContainer">
    <div class="row1">
      <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
    </div>
    <div class="row2">
      <span>More text.</span>
    </div>
  </div>
</div>

这篇关于调整图片大小以符合< td>或div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！