Question

如何使图像适合div（不要超越它）并保持其纵横比，而NSTableView中的-clickedRow永远不会超过150px？

height

正如您在此处所见，图片<!DOCTYPE html> <html> <head> </head> <body> <div style="border: 1px solid black; height: 200px; width: 200px;"> <img src="https://about.canva.com/wp-content/uploads/sites/3/2017/02/congratulations_-banner.png" style="max-height: 150px; width: auto;" /> </div> </body> </html>为width而auto为max-height，但此图片超出了父div及其边框。

如何使此图像保持其纵横比并适合此div并缩小，但150px为max-height。因此，高度不超过150px且150px width对此auto来保持它的ascpet比率并且也适合此div。

Answer 1

根据this answer

你可以使用

＆＃13;

<div style="border: 1px solid black; height: 200px; width: 200px;">
    <img src="https://about.canva.com/wp-content/uploads/sites/3/2017/02/congratulations_-banner.png" style="max-width: 100%;  max-height: 100%;" />
</div>

＆＃13;

请注意：

最好将CSS与HTML分开，如this answer所述。所以你应该使用下面的代码

＆＃13;

#bannerContainer
{
  border: 1px solid black; 
  height: 200px; 
  width: 200px;
}
#banner {
  max-width: 100%;
  max-height: 100%;
}

＆＃13;

<div id="bannerContainer">
  <img id="banner" src="https://about.canva.com/wp-content/uploads/sites/3/2017/02/congratulations_-banner.png"  />
</div>

＆＃13;

Answer 2

提供img max-width:100%。

＆＃13;

<!DOCTYPE html>
<html>
<head>

</head>
<body>

	<div style="border: 1px solid black; height: 200px; width: 200px;">
		<img src="https://about.canva.com/wp-content/uploads/sites/3/2017/02/congratulations_-banner.png" style="max-height: 150px; max-width:100%; width: auto;" />
	</div>

</body>

</html>

＆＃13;

超出div的图像 - 需要最大150px高度，以适应并保持其纵横比

2 个答案: