在HTML中的圖像寬度沒有改變

我有下面的代碼，我試圖改變圖像的高度和寬度。爲此，我給出了<img >標籤中的高度和寬度參數。在HTML中的圖像寬度沒有改變

由於對寬度沒有影響，圖像的高度正在改變。我希望我的形象更大。

<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

來源

2016-12-17 Gagandeep Singh Randhawa

創建一個jsfiddle示例 –

你不工作在CSS？ – Obink

是的，我願意。我已經嘗試了幾乎所有使用CSS的東西，但沒有成功。 –

確保類calIcons不操縱的寬度或尺寸。

使width和height圖像標記100%然後調整容器div的寬度和高度，以任何你想要的值。如果圖像是div中唯一的元素，這將起作用。

來源

2016-12-17 05:55:26

爲圖像添加樣式 - img {width：100％;} – Vishnu

當我在下面嘗試時，它給我一個img標籤中寬度和高度屬性的錯誤。

\t \t \t

\t \t

–

由於您傳遞的寬度和高度作爲屬性，你應該做寬度= 100％，而不是寬度：100％ –

而不是使用height和width屬性，以保持它的清潔，你可以嘗試一些你CSS中的以下文件：

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

考慮您已經父div內設置你的尺寸值，您可以將img的寬度和高度設置爲100%。

或者，如果你不想讓圖像伸展;

您可以將它設置爲div的background-image,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 */ 
}

來源

2016-12-17 06:02:46

替換這個代碼。它會給你的圖像的最大尺寸。

<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>

來源

2016-12-17 06:50:59

我用下面的代碼，但它給我一個語法錯誤的寬度和高度屬性：

–

對不起，我的錯誤。我更新了我的代碼。現在就試試。 –

在HTML中的圖像寬度沒有改變

回答

相關問題