英文:
How to make an image inside a div not strech?
问题
Sure, here's the translated content:
我正在制作一个页眉，其中包含一个图像（目前只关心左侧的图像），该图像设置了最大宽度并且可以响应性地更改大小。一旦我没有为任何元素设置高度，页眉的高度将取决于其中最大的元素。通常情况下，图像是页眉的较大元素，但是当页眉的高度开始受到导航栏的限制时，图像开始拉伸以保持最大宽度，但同时保持与页眉相同的高度。
我希望图像变小，以保持纵横比并适应页眉在变小时的尺寸。
<!-- 开始代码段: js 隐藏: false 控制台: true Babel: false -->
<!-- 语言: lang-css -->
header {
background-color: #030052;
padding: 1.5em;
display: flex;
justify-content: space-between;
}
.logo {
max-width: 22%;
}
nav {
width: 23%;
margin: 0;
display: flex;
flex-direction: column;
}
<!-- 语言: lang-html -->
<header class="flex">
<img class="logo" src="./images/movon.png" alt="MovOn Logo">
<nav>
<h2 class="inv">导航</h2>
<ul>
<li><a href="./index.html" title="主页">主页</a></li>
<li><a href="./pages/explore.html" title="探索页面">探索</a></li>
<li><a href="./pages/mylist.html" title="我的列表">我的列表</a></li>
</ul>
</nav>
<div class="profile-section">
<div class="login-container">
<a class="login-link subtext" href="./pages/login.html" title="登录页面">登录</a>
<a class="login-link subtext" href="./pages/login.html" title="登录页面">登陆</a>
</div>
<img class="icon profile-icon" src="./images/accountpicture.png" alt="个人资料图标">
</div>
</header>
<!-- 结束代码段 -->
我尝试过删除并更改图像的宽度，并尝试为其设置高度和最大高度（但完全没有更改），但都没有起作用。
<details>
<summary>英文:</summary>
I am making a header and there is an image inside it (I'm only worried with the left one for now) that is set with a max-width and changes size responsively. Once I haven't set height for anything, the header's height is dependent on the biggest element inside it. The image is normally the bigger element of the header, however, when the header's height starts to be limited by the nav, the image starts to stretch to keep the max-width, but also keeping it the same height as the header.
I wanted the image to get smaller so it keeps the aspect ratio and fits inside the header when it gets smaller.
[The header on a bigger screen](https://i.stack.imgur.com/7XxGR.png)
[The header on a smaller screen](https://i.stack.imgur.com/5waQF.png)
[The image stretched](https://i.stack.imgur.com/WNXiU.png)
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
header {
background-color: #030052;
padding: 1.5em;
display: flex;
justify-content: space-between;
}
.logo {
max-width: 22%;
}
nav {
width: 23%;
margin: 0;
display: flex;
flex-direction: column;
}
<!-- language: lang-html -->
<header class="flex">
<img class="logo" src="./images/movon.png" alt="MovOn Logo">
<nav>
<h2 class="inv">Navigation</h2>
<ul>
<li><a href="./index.html" title="Home Page">Home</a></li>
<li><a href="./pages/explore.html" title="Explore Page">Explore</a></li>
<li><a href="./pages/mylist.html" title="My list">My List</a></li>
</ul>
</nav>
<div class="profile-section">
<div class="login-container">
<a class="login-link subtext" href="./pages/login.html" title="Sign In Page">Sign In</a>
<a class="login-link subtext" href="./pages/login.html" title="LogIn Page">Login</a>
</div>
<img class="icon profile-icon" src="./images/accountpicture.png" alt="Profile Icon">
</div>
</header>
<!-- end snippet -->
I've tried removing and changing the width on the image and tried setting a height and max-height to it (which changed nothing at all), but nothing worked.
</details>
# 答案1
**得分**: 1
Flexbox的`align-items`属性默认设置为`stretch`，因此图像将始终被拉伸。将图像上的`align-self`设置为center（或者如果您想将其对齐到顶部，则设置为start），以强制该元素不拉伸。有关详细信息，请参见[MDN][2]。
```css
header {
background-color: #030052;
padding: 1.5em;
display: flex;
justify-content: space-between;
}
.logo {
max-width: 22%;
align-self: center; /* 添加了这一行 */
}
nav {
width: 23%;
margin: 0;
display: flex;
flex-direction: column;
}
<header class="flex">
<img class="logo" src="https://placekitten.com/100/100" alt="MovOn Logo">
<nav>
<h2 class="inv">Navigation</h2>
<ul>
<li><a href="./index.html" title="Home Page">Home</a></li>
<li><a href="./pages/explore.html" title="Explore Page">Explore</a></li>
<li><a href="./pages/mylist.html" title="My list">My List</a></li>
</ul>
</nav>
<div class="profile-section">
<div class="login-container">
<a class="login-link subtext" href="./pages/login.html" title="Sign In Page">Sign In</a>
<a class="login-link subtext" href="./pages/login.html" title="LogIn Page">Login</a>
</div>
<img class="icon profile-icon" src="https://picsum.photos/id/237/200/200" alt="Profile Icon">
</div>
</header>
英文:
Flexbox's align-items property is set to stretch as a default so the image will always stretch up. Set align-self to center (or start if you want it alignt to the top) on the image to force that element not to stretch. See MDN for details
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
header {
background-color: #030052;
padding: 1.5em;
display: flex;
justify-content: space-between;
}
.logo {
max-width: 22%;
align-self: center; /* addded this */
}
nav {
width: 23%;
margin: 0;
display: flex;
flex-direction: column;
}
<!-- language: lang-html -->
<header class="flex">
<img class="logo" src="https://placekitten.com/100/100" alt="MovOn Logo">
<nav>
<h2 class="inv">Navigation</h2>
<ul>
<li><a href="./index.html" title="Home Page">Home</a></li>
<li><a href="./pages/explore.html" title="Explore Page">Explore</a></li>
<li><a href="./pages/mylist.html" title="My list">My List</a></li>
</ul>
</nav>
<div class="profile-section">
<div class="login-container">
<a class="login-link subtext" href="./pages/login.html" title="Sign In Page">Sign In</a>
<a class="login-link subtext" href="./pages/login.html" title="LogIn Page">Login</a>
</div>
<img class="icon profile-icon" src="https://picsum.photos/id/237/200/200" alt="Profile Icon">
</div>
</header>
<!-- end snippet -->
答案2
得分: 0
I think the display flex property causes the image to be squashed. I would put a container around the image. Then the image always scales proportionally.
我认为display flex属性导致图像被压缩。我会在图像周围放置一个容器。然后图像始终按比例缩放。
英文:
I think the display flex property causes the image to be squashed. I would put a container around the image. Then the image always scales proportionally.
<!-- begin snippet: js hide: false console: true babel: null -->
<!-- language: lang-css -->
header {
background-color: #030052;
padding: 1.5em;
display: flex;
justify-content: space-between;
}
.logowrap {
max-width: 22%;
}
.logo {
max-width: 100%;
}
nav {
width: 23%;
margin: 0;
display: flex;
flex-direction: column;
}
<!-- language: lang-html -->
<header class="flex">
<div class="logowrap">
<img class="logo" src="https://place-hold.it/200x200" alt="MovOn Logo">
</div>
<nav>
<h2 class="inv">Navigation</h2>
<ul>
<li><a href="./index.html" title="Home Page">Home</a></li>
<li><a href="./pages/explore.html" title="Explore Page">Explore</a></li>
<li><a href="./pages/mylist.html" title="My list">My List</a></li>
</ul>
</nav>
<div class="profile-section">
<div class="login-container">
<a class="login-link subtext" href="./pages/login.html" title="Sign In Page">Sign In</a>
<a class="login-link subtext" href="./pages/login.html" title="LogIn Page">Login</a>
</div>
<img class="icon profile-icon" src="https://place-hold.it/200x200" alt="Profile Icon">
</div>
</header>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论