css图像被拉伸到100％高度

Question

我有css无论我正在做什么拉伸图像但我不知道图像是如何小但它使我的使用

the final answer 

while (std::getline(file, line))
    {
        std::istringstream iss(line);

        std::size_t space = line.find(" ", 0);
        if (!isspace(line[0]))
        {
            iss.clear();
        }
        else
        {
            int i;
            for (i = 0; i <= 12; i++)
            {
                if (isalpha(line[i]))
                {
                    iss.clear();
                    goto start;
                }
            }

            iss >> data.time >> data.state >> data.ID >> data.status >> data.type >> data.byte_lent >> data.CAN_message_1 >> data.CAN_message_2 >> data.CAN_message_3 >> data.CAN_message_4 >> data.CAN_message_5 >> data.CAN_message_6;
            iss >> data.CAN_message_7 >> data.CAN_message_8 >> data.type1 >> data.type2 >> data.type3 >> data.type4 >> data.type5 >> data.type6 >> data.type7 >> data.type8 >> data.type9;

使用的css如下所示，但是你会看到它导致我的图像拉伸而且尺寸不正确。

<?PHP the_post_thumbnail( 'full' );  ?>

网址在这里

http://www.lockmsiths.solitudesoftware.co.uk/#site

Answer 1

您的<img>代码由Wordpress设置了width和height属性。

<img width="1000" height="500" ... >

在CSS中，您可以根据200px宽度设置自动高度以保持宽高比：

.services-icon img {
    height: auto;
}

请注意，您的CSS会覆盖此图片的Wordpress设置。

Answer 2

如果您希望图像在容器中使用100％宽度，请删除css中的宽度：200px。标签具有宽度和高度属性，将其删除。如果您无法控制这些内联属性，则可以使用javascript并将其删除。

在这种情况下不必使用height：auto，因为浏览器样式适用于该样式。但我建议你使用它。

Answer 3

您可以在CSS中强制使用height: auto;自动设置高度。在WordPress中更改实际图像高度会更好，这样图像上的width和height属性就是正确的（如提到的@andreas）。