Question

我正在创建一个两个colum网站，必须在文本框旁边放置图片。图像必须根据text-div调整大小，以便它们始终覆盖50％的宽度，高度由包含文本的div定义。（例如，想象一下将窗口拉到较小的宽度，文本将填充更多的高度，并且图像必须填充相同的高度，并且仍然在其容器中居中并保持其纵横比。）这可能只使用HTML和CSS，如果是这样，怎么样？

Answer 1

你可以使用flexbox（如果我理解你想要正确实现的目的:)）。

请参阅https://jsfiddle.net/64gzjah4/1/

上的演示

<强> CSS：

<div class="container">
    <div class="item">
    </div>
    <div class="item">
       Text goes here
    </div>
</div>

HTML：

 private void ShowHash()
 {
    Image inpic = pb_selected.Image;
    Bitmap image = new Bitmap(inpic);
    byte[] imgBytes = new byte[0];
    imgBytes = (byte[])converter.ConvertTo(image, imgBytes.GetType());
    string hash = ComputeHashCode(imgBytes);
    txt_selectedText.Text = hash;
 }
 private string ComputeHashCode(byte[] imgBytes)
 {
    //Compute hash bytes
    byte[] hash = shaEncryptor.ComputeHash(imgBytes);
    //Convert hash bytes to string representation
    return Convert.ToBase64String(hash);
 }

但是，浏览器对flexbox的支持并不是那么好，因此它取决于您的浏览器要求。可以在https://css-tricks.com/snippets/css/a-guide-to-flexbox/

看到对flexbox的浏览器支持（以及flexbox指南）

Answer 2

解决方案1 是使用Heidi Selmer Nielsen提供的答案，但是如前所述，Flexbox并不能提供很好的支持，而且他们不会涵盖您所拥有的场景完全在你的问题中提到。

图像必须填充相同的高度，并且仍然在其容器中居中并保持其纵横比

解决方案2 是使用表格（我知道我说得对，TABLES？！）他们不能完全按照您的意愿行事，但你会保持图像的宽高比，但是你无法通过文本单元控制高度。

http://jsfiddle.net/cved0fwh/

<table>
<tr>
    <td class="img"><img src="http://data3.whicdn.com/images/20161286/large.jpg" /></td>
    <td class="txt">Odd Future Intelligentsia gentrify, Thundercats McSweeney's meh kitsch narwhal leggings. Gastropub pop-up twee drinking vinegar. Lomo Blue Bottle meditation, migas VHS listicle leggings. XOXO bitters ethical actually. Fap kitsch Intelligentsia, locavore chia Bushwick roof party ennui four loko skateboard messenger bag art party mixtape iPhone taxidermy. Chillwave artisan put a bird on it Blue Bottle cred. Forage tilde tote bag vinyl listicle skateboard Austin deep v chambray church-key.  Odd Future Intelligentsia gentrify, Thundercats McSweeney's meh kitsch narwhal leggings. Gastropub pop-up twee drinking vinegar. Lomo Blue Bottle meditation, migas VHS listicle leggings. XOXO bitters ethical actually. Fap kitsch Intelligentsia, locavore chia Bushwick roof party ennui four loko skateboard messenger bag art party mixtape iPhone taxidermy. Chillwave artisan put a bird on it Blue Bottle cred. Forage tilde tote bag vinyl listicle skateboard Austin deep v chambray church-key.</td>
</tr>

tr{
    border:1px solid red;
}
td {
    width:50%;
    height:auto;
}
img{
    width:100%;
    height:auto;
}

解决方案3

实现您正在寻找的效果的唯一方法是使用像Javascript这样的客户端脚本语言。

http://jsbin.com/xuputulodu/edit?js,output

我刚刚为你提供了一个快速而肮脏的概念证据：

$(document).ready(function(){

  function imageSize(){
    var a = $('img').height();
    var b = $('.text').height();

    if (a > b){
      $('img').height(b).width('auto').css('margin-top', 0);
    } else if (b > a){
      $('img').width('100%').height('auto').css('margin-top', (b-a)/2);
    }
  }

  $(window).resize(function(){
    imageSize();    
  });

});

Answer 3

您可以将表格解决方案与背景尺寸：封面相结合;解。

演示：https://jsfiddle.net/64gzjah4/2/

<强> CSS：

td {
    border: 1px solid red;
    width: 50%;
}
td:first-child {
    background-image: url('http://placekitten.com/g/200/300');
    background-repeat: no-repeat;
    background-size: cover; /* Make the image cover the td */
    background-position: 50% /* Center the image inside the td */
}

<强> HTML：

<table>
    <tr>
        <td>
        </td>
        <td>
            Text goes here
        </td>
    </tr>
</table>

您需要哪些浏览器支持？ IE8不支持background-size属性，但该属性非常适合您的需求，所以希望您不需要IE8的支持;）http://caniuse.com/#feat=background-img-opts

响应调整图像高度以适应它旁边的text-div

3 个答案: