Как заставить высоту изображения внутри слева <td>автоматически следовать за высотой справа <td>? - PullRequest
Новая
       12

Как заставить высоту изображения внутри слева <td>автоматически следовать за высотой справа <td>?

0 голосов
/ 25 июня 2018

Например, внутри таблицы у меня есть изображение внутри тд, а немного текста справа тд: 

<table>
  <tr>
  <td><img src="https://www.gravatar.com/avatar/65756ce7bab4d76ac10456972dd9f21d?s=96&d=identicon&r=PG&f=1"/></td>
  <td>test1<br/>test2<br/>test3</td>
  </tr>
</table>

Теперь я хочу, чтобы высота изображения автоматически следовала за высотой его правой части:

Когда правый тд короче изображения, изображение уменьшается:

enter image description here

Когда правый тд выше, изображение увеличивается:

enter image description here

Есть ли способ сделать это? Я попробовал: 

<table style="position:relative;height:auto;">
  <tr style="position:relative;height:auto;">
  <td style="position:relative;height:auto;"><img src="https://www.gravatar.com/avatar/65756ce7bab4d76ac10456972dd9f21d?s=96&d=identicon&r=PG&f=1" style="position:relative;height:auto;"/></td>
  <td style="position:relative;">test1<br/>test2<br/>test3</td>
  </tr>
</table>

but I can't get my desired result.

Ответы [ 2 ]

0 голосов
/ 25 июня 2018

Я полагаю, что это будет проще сделать с помощью jQuery, чем простой CSS.Вы можете попробовать следующее решение, если это поможет: 

<!DOCTYPE html>
<html>
<head>
<script
    src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

</head>
<body>
    <table>
        <tr>
            <td id="first"><img
                src="https://www.gravatar.com/avatar/65756ce7bab4d76ac10456972dd9f21d?s=96&d=identicon&r=PG&f=1" /></td>

            <td id="second">test1<br />test2<br />test3<br /> test1<br />test2<br />test3<br />
                test1<br />test2<br />test3
            </td>
        </tr>
    </table>

    <script type="text/javascript">
        var h1 = $("#second").css("height");
        console.log(h1);
        $("img").css("height", h1);
    </script>
</body>
</html>
0 голосов
/ 25 июня 2018

Вы можете попробовать установить правило max-height CSS на 100%

Как это: 

<img src="https://www.gravatar.com/avatar/65756ce7bab4d76ac10456972dd9f21d?s=96&d=identicon&r=PG&f=1" style="max-height:100%;"/>
...