Question

我有以下代码，我试图更改图像的高度和宽度。为此，我在<img >标签中给出了高度和宽度参数。

正在改变图像的高度，因为宽度没有影响。我希望我的图像更大。

<div style="text-align: center; margin-top: 10px; width: 1000px; height:100px">
        <img class="calIcons" src="@calLegend" alt="Legend" height="1000" width="100"/>
</div>

图片：

尺寸443x30
宽度443像素
高度30像素
位深度32

Answer 1

确保班级calIcons不会操纵宽度或大小。

制作图片代码width的{{1}}和height，然后将容器div的宽度和高度调整为您想要的任何值。如果图像是div中的唯一元素，则此方法有效。

Answer 2

不要使用height和width属性来保持清洁，您可以在 CSS 文件中尝试以下内容：

div > img{
    width: 100%;
    height: 100%;
}

考虑到您已经在父div内设置了尺寸值，您只需为子100%设置宽度和高度为img。

或者，如果您不希望图像伸展;

您可以将其设为background-image div background-size cover。

像这样（ HTML ）：

<div class="parent-div"> <!-- the parent div with the set dimensions !-->
    <div class="child-img"></div> <!-- the image !-->
</div>

<强> CSS ：

.parent-div{
    width: 1000px;
    height: 100px;
    text-align: center;
    margin-top: 10px;
}
.child-img{
    width: 100%; /* set the dimensions to 1000px x 100px */
    height: 100%;
    background: no-repeat url('image/location.jpg');
    background-size: cover; /* cover the whole div */
}

Answer 3

用此替换您的代码。它将为您提供图像的最大尺寸。

<div style="text-align: center; margin-top: 10px; width: 1000px; height:100px">
        <img class="calIcons" src="@calLegend" alt="Legend" style= "width: 100%; height:100%"/>
</div>

html中的图像宽度没有改变

3 个答案: