拉伸图像以适应Div高度和宽度的100％ [英] Stretch Image to Fit 100% of Div Height and Width

问题描述

我有一个div与以下CSS

I have a div with the following CSS

#mydiv{
    top: 50px;
    left: 50px;
    width: 200px;
    height: 200px;
}

，我的HTML看起来像这样

and my HTML looks like this

<div id = "mydiv">
    <img src = "folder/file.jpg" width = "200px" height = "200px">
</div>

我希望我的网络图片始终是相同的大小）无论实际图像的分辨率是多少。如果我的实际图像文件是正方形（1：1的比例），那么这不是一个问题。但是如果实际的图像文件不是正方形，那么显示的web图像扩展到div的高度和宽度（在这种情况下为200px）的100％。

I'd like my web image to always be the same size (in a 1:1 aspect ration) no matter what the resolution of the actual image is. If my actual image files are square (with 1:1 ratio) then this isn't a problem. But if the actual image files are not square then the displayed web image do stretch to 100% of both the div's height and width (in this case 200px).

如何获得不同的图片大小以适合我的DIV？

How do I get different image sizes to fit to my DIV?

推荐答案

你在混合注释。应为：

<img src="folder/file.jpg" width="200" height="200">

（注意，没有 px ）。或：

<img src="folder/file.jpg" style="width: 200px; height: 200px;">

（使用 style 属性）style属性可以替换为以下CSS：

(using the style attribute) The style attribute could be replaced with the following CSS:

#mydiv img {
    width: 200px;
    height: 200px;
}

或

#mydiv img {
    width: 100%;
    height: 100%;
}

这篇关于拉伸图像以适应Div高度和宽度的100％的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！