为什么文本框不等于图像大小？

Question

定义我如何解决文本框等于图像的问题。它是如何解决的。

我把它 div 到 dov 图像，就像导航栏下拉菜单一样。

你可以看到这里的一切。我试图解决它但徒劳无功。

Image Dropdown

    .dropdown {
        display: inline-block;
        position: relative;
    }

enter image description here!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image Dropdown</title>
    <style>
    .dropdown-content {
        display: none;
        position: absolute;
        background-color: #f9f9f9;
        max-width: 160px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        z-index: 1;
    }

    .dropdown:hover .dropdown-content {
        display: block;
    }

    .desc {
        padding: 15px;
        text-align: center;
       
    }
</style>




<h2>Dropdown Image</h2>
<p>Move the mouse over the image below to open the dropdown content.</p>

<div class="dropdown">
    <img src="Images/forest.png" alt="Tree" width="100" height="50">
    <div class="dropdown-content">
        <img src="Images/forest.png" alt="Forest" width="300" height="200">
        <div class="desc">Forest With Road</div>
    </div>
</div>

```

Answer 1

您的问题与下拉文本无关，而是由下拉图像溢出引起的：

CSS 定义

.dropdown-content { max-width: 160px }

将文本宽度限制为

160px

，但图像被迫增长到

300x200px

给定内联

<img width="300" height="200">

.

想到四个选项：

从
```
max-width: 160px
```
中删除
```
.dropdown-content
```
。这将显示其定义的 inline 大小为 300x200px 的下拉图像。
删除内联图像
```
width
```
和
```
height
```
属性以及
```
max-width
```
并显示从服务器读取的原始物理尺寸的图像。
保留
```
max-width
```
作为替代方案，确保下拉图像符合定义的最大值
```
160px
```
和
```
img { width: 100%; height: auto }
```
.
同 3. 但用
```
object-fit: cover
```
代替
```
height: auto
```
.

片段

.dropdown {
    display: inline-block;
    position: relative;
}
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;

    /*    max-width: 160px;/* Alternative 1. and 2. REMOVE */

    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;
}
.dropdown:hover .dropdown-content {
    display: block;
}

.desc {
    padding: 15px;
    text-align: center;
}

/* Alternatives */
.max-width  { max-width: 160px }        /* 3. and 4. */
.size       { width: 100%; height: auto }      /* 3. */
.object-fit { width: 100%; object-fit: cover } /* 4. */

<h2>Dropdown Image</h2>
<p>Move the mouse over the image below to open the dropdown content.</p>

<div class="dropdown">
    <img src="https://picsum.photos/id/26/300/200" alt="Tree" width="100" height="50">
    <div class="dropdown-content">
        <img src="https://picsum.photos/id/26/300/200" alt="Forest" width="300" height="200">
        <div class="desc">1) No <b>max-width</b></div>
    </div>
</div>


<div class="dropdown">
    <img src="https://picsum.photos/id/26/300/200" alt="Tree" width="100" height="50">
    <div class="dropdown-content">
        <img src="https://picsum.photos/id/26/400/240" alt="Forest">
        <div class="desc">2) No <b>max-width</b> and no inline &lt;img&gt; sizes</div>
    </div>
</div>

<div class="dropdown">
    <img src="https://picsum.photos/id/26/300/200" alt="Tree" width="100" height="50">
    <div class="dropdown-content max-width">
        <img class="size" src="https://picsum.photos/id/26/300/200" alt="Forest" width="300" height="200">
        <div class="desc">3) With <b>max-width</b> and inline &lt;img&gt; sizes, but image forced to fit</div>
    </div>
</div>

<div class="dropdown">
    <img src="https://picsum.photos/id/26/300/200" alt="Tree" width="100" height="50">
    <div class="dropdown-content max-width">
        <img class="object-fit" src="https://picsum.photos/id/26/300/200" alt="Forest" width="300" height="200">
        <div class="desc">4) As 3), but with <b>object-fit</b></div>
    </div>
</div>

为什么文本框不等于图像大小？

问题描述投票：0回答：1

1个回答

最新问题

为什么文本框不等于图像大小？

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1