Question

在下面的代码中，

<table>
    <tr>
        <td>
            <input type="radio" name="cardtype" value="visa">
            <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/04/Visa.svg/175px-Visa.svg.png"> VISA
        </td>
        <td>
            <input type="radio" name="cardtype" value="amex">
            <img src="http://www.hoax-slayer.com/images/american-express-security-update-scam-2.jpg"> AMEX
        </td>
        <td>
            <input type="radio" name="cardtype" value="mastercard">
            <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b7/MasterCard_Logo.svg/2000px-MasterCard_Logo.svg.png"> Master card
        </td>
    </tr>
</table>

input中的

td元素继承了与img不同的宽度。为什么呢？

img元素是否继承父元素（td）的高度和宽度？ Here是完整的代码。

Answer 1

默认情况下，if ( !(eventHandle = elemData.handle) ) { eventHandle = elemData.handle = function( e ) { // Discard the second event of a jQuery.event.trigger() and // when an event is called after a page has unloaded return typeof jQuery !== strundefined && (!e || jQuery.event.triggered !== e.type) ? jQuery.event.dispatch.apply( eventHandle.elem, arguments ) : undefined; }; // Add elem as a property of the handle fn to prevent a memory leak with IE non-native events eventHandle.elem = elem; }元素不会继承高度和宽度父标签。您需要在自定义CSS中外部指定它像：

<img>

此主题应该可以帮助您更好地理解它：Why doesn't my image width inherit from parent div width

在您的情况下，您必须确保将正确的css应用于您的父节点。

Answer 2

某些样式（如字体系列，文本对齐）会自动从父元素继承子元素继承。其他样式不会自动继承在这种情况下，您必须将宽度和高度设置为父级，然后在css代码中指定inherit属性

尝试以下代码

     table {
            width:100%;
        }
        td{
            width: 30%;
            border: 1px solid red;
        }

之后你必须指定继承属性

img {
    height: inherit;
    width: inherit;
}

Answer 3

正如Bikram Kundu所说，img默认不继承其父级的高度和宽度。它的原始尺寸由其内容决定。您需要明确指定图像的宽度和高度，以使其具有所需的尺寸。

我认为您的目的是将图像限制在其容器中。为此，您可以在图像上使用width:100%

table img{
  width:100%;
}

img是否继承父元素维度？

3 个答案: