gpt4 book ai didi

html - CSS 缩小图像以适应包含的 div,而不指定原始大小

转载 作者:技术小花猫 更新时间:2023-10-29 11:37:32 27 4
gpt4 key购买 nike

我想要一个网站,我可以在其中上传不同大小的图像以在 jquery slider 中显示。我似乎无法将图像放入包含的 div 中(按比例缩小)。这是我打算如何做的

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org    /TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="Imtest.css"/>
</head>

<body>

<div id="wrapper">

<div id="im"><img src="Images/Scarpa2_1.jpg" /></div>

</div>
</body>
</html>

和 CSS

#wrapper {
width: 400px;
height: 400px;
border: 2px black solid;
margin: auto;
}

#im {
max-width: 100%;
}

我尝试在 CSS 中将图像的最大宽度设置为 100%。但这是行不通的。

最佳答案

您可以使用 background image实现这一目标;

来自 MDN - Background Size: Contain :

This keyword specifies that the background image should be scaled to be as large as possible while ensuring both its dimensions are less than or equal to the corresponding dimensions of the background positioning area.

Demo

CSS:

#im {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: url("path/to/img");
background-repeat: no-repeat;
background-size: contain;
}

HTML:

<div id="wrapper">
<div id="im">
</div>
</div>

关于html - CSS 缩小图像以适应包含的 div,而不指定原始大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18606473/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com