「前端面試題」如何讓img自動(dòng)適應(yīng)div容器大小？
要讓 `<img>` 元素自動(dòng)適應(yīng)其包含的 `<div>` 容器大小，您可以使用CSS來(lái)實(shí)現(xiàn)。以下是一種常見(jiàn)的方法：
```html
<div style="width: 300px; height: 200px; overflow: hidden;">
?<img src="your-image.jpg" style="width: 100%; height: auto;" />
</div>
```
在上面的示例中，`<div>` 容器設(shè)置了固定的寬度和高度，并使用 `overflow: hidden;` 來(lái)確保圖像不會(huì)溢出容器。然后，`<img>` 元素使用 `style` 屬性中的 `width: 100%;` 和 `height: auto;` 來(lái)自動(dòng)適應(yīng)容器的寬度，同時(shí)保持圖像的原始縱橫比。
這樣，無(wú)論您的容器大小如何，圖像都會(huì)自動(dòng)適應(yīng)容器的大小，并且不會(huì)拉伸變形。如果容器大小改變，圖像也會(huì)相應(yīng)地自動(dòng)調(diào)整大小以適應(yīng)容器。
標(biāo)簽：
