如何使一个位于 div 内的图像不拉伸？

huangapple
go评论99阅读模式
英文:

How to make an image inside a div not strech?

问题

Sure, here's the translated content:

我正在制作一个页眉，其中包含一个图像（目前只关心左侧的图像），该图像设置了最大宽度并且可以响应性地更改大小。一旦我没有为任何元素设置高度，页眉的高度将取决于其中最大的元素。通常情况下，图像是页眉的较大元素，但是当页眉的高度开始受到导航栏的限制时，图像开始拉伸以保持最大宽度，但同时保持与页眉相同的高度。

我希望图像变小，以保持纵横比并适应页眉在变小时的尺寸。

大屏幕上的页眉

小屏幕上的页眉

图像被拉伸

  1. <!-- 开始代码段: js 隐藏: false 控制台: true Babel: false -->
  3. <!-- 语言: lang-css -->
  4. header {
  5.   background-color: #030052;
  6.   padding: 1.5em;
  7.   display: flex;
  8.   justify-content: space-between;
  9. }
  11. .logo {
  12.   max-width: 22%;
  13. }
  15. nav {
  16.   width: 23%;
  17.   margin: 0;
  18.   display: flex;
  19.   flex-direction: column;
  20. }
  21. <!-- 语言: lang-html -->
  22. <header class="flex">
  23.   <img class="logo" src="./images/movon.png" alt="MovOn Logo">
  24.   <nav>
  25.     <h2 class="inv">导航</h2>
  26.     <ul>
  27.       <li><a href="./index.html" title="主页">主页</a></li>
  28.       <li><a href="./pages/explore.html" title="探索页面">探索</a></li>
  29.       <li><a href="./pages/mylist.html" title="我的列表">我的列表</a></li>
  30.     </ul>
  31.   </nav>
  32.   <div class="profile-section">
  33.     <div class="login-container">
  34.       <a class="login-link subtext" href="./pages/login.html" title="登录页面">登录</a>
  35.       <a class="login-link subtext" href="./pages/login.html" title="登录页面">登陆</a>
  36.     </div>
  37.     <img class="icon profile-icon" src="./images/accountpicture.png" alt="个人资料图标">
  38.   </div>
  39. </header>
  41. <!-- 结束代码段 -->
  42. 我尝试过删除并更改图像的宽度，并尝试为其设置高度和最大高度（但完全没有更改），但都没有起作用。
  44. <details>
  45. <summary>英文:</summary>
  47. I am making a header and there is an image inside it (I&#39;m only worried with the left one for now) that is set with a max-width and changes size responsively. Once I haven&#39;t set height for anything, the header&#39;s height is dependent on the biggest element inside it. The image is normally the bigger element of the header, however, when the header&#39;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.
  48. I wanted the image to get smaller so it keeps the aspect ratio and fits inside the header when it gets smaller.
  49. [The header on a bigger screen](https://i.stack.imgur.com/7XxGR.png)
  51. [The header on a smaller screen](https://i.stack.imgur.com/5waQF.png)
  53. [The image stretched](https://i.stack.imgur.com/WNXiU.png)
  55. &lt;!-- begin snippet: js hide: false console: true babel: false --&gt;
  57. &lt;!-- language: lang-css --&gt;
  59.     header {
  60.       background-color: #030052;
  61.       padding: 1.5em;
  62.       display: flex;
  63.       justify-content: space-between;
  64.     }
  66.     .logo {
  67.       max-width: 22%;
  68.     }
  70.     nav {
  71.       width: 23%;
  72.       margin: 0;
  73.       display: flex;
  74.       flex-direction: column;
  75.     }
  77. &lt;!-- language: lang-html --&gt;
  79.     &lt;header class=&quot;flex&quot;&gt;
  80.       &lt;img class=&quot;logo&quot; src=&quot;./images/movon.png&quot; alt=&quot;MovOn Logo&quot;&gt;
  81.       &lt;nav&gt;
  82.         &lt;h2 class=&quot;inv&quot;&gt;Navigation&lt;/h2&gt;
  83.         &lt;ul&gt;
  84.           &lt;li&gt;&lt;a href=&quot;./index.html&quot; title=&quot;Home Page&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;
  85.           &lt;li&gt;&lt;a href=&quot;./pages/explore.html&quot; title=&quot;Explore Page&quot;&gt;Explore&lt;/a&gt;&lt;/li&gt;
  86.           &lt;li&gt;&lt;a href=&quot;./pages/mylist.html&quot; title=&quot;My list&quot;&gt;My List&lt;/a&gt;&lt;/li&gt;
  87.         &lt;/ul&gt;
  88.       &lt;/nav&gt;
  89.       &lt;div class=&quot;profile-section&quot;&gt;
  90.         &lt;div class=&quot;login-container&quot;&gt;
  91.           &lt;a class=&quot;login-link subtext&quot; href=&quot;./pages/login.html&quot; title=&quot;Sign In Page&quot;&gt;Sign In&lt;/a&gt;
  92.           &lt;a class=&quot;login-link subtext&quot; href=&quot;./pages/login.html&quot; title=&quot;LogIn Page&quot;&gt;Login&lt;/a&gt;
  93.         &lt;/div&gt;
  94.         &lt;img class=&quot;icon profile-icon&quot; src=&quot;./images/accountpicture.png&quot; alt=&quot;Profile Icon&quot;&gt;
  95.       &lt;/div&gt;
  96.     &lt;/header&gt;
  98. &lt;!-- end snippet --&gt;
  100. I&#39;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.
  102. </details>
  105. # 答案1
  106. **得分**: 1
  108. Flexbox的`align-items`属性默认设置为`stretch`，因此图像将始终被拉伸。将图像上的`align-self`设置为center（或者如果您想将其对齐到顶部，则设置为start），以强制该元素不拉伸。有关详细信息，请参见[MDN][2]。
  110. ```css
  111. header {
  112.   background-color: #030052;
  113.   padding: 1.5em;
  114.   display: flex;
  115.   justify-content: space-between;
  116. }
  118. .logo {
  119.   max-width: 22%;
  120.   align-self: center; /* 添加了这一行 */
  121. }
  123. nav {
  124.   width: 23%;
  125.   margin: 0;
  126.   display: flex;
  127.   flex-direction: column;
  128. }
  1. <header class="flex">
  2.   <img class="logo" src="https://placekitten.com/100/100" alt="MovOn Logo">
  3.   <nav>
  4.     <h2 class="inv">Navigation</h2>
  5.     <ul>
  6.       <li><a href="./index.html" title="Home Page">Home</a></li>
  7.       <li><a href="./pages/explore.html" title="Explore Page">Explore</a></li>
  8.       <li><a href="./pages/mylist.html" title="My list">My List</a></li>
  9.     </ul>
  10.   </nav>
  11.   <div class="profile-section">
  12.     <div class="login-container">
  13.       <a class="login-link subtext" href="./pages/login.html" title="Sign In Page">Sign In</a>
  14.       <a class="login-link subtext" href="./pages/login.html" title="LogIn Page">Login</a>
  15.     </div>
  16.     <img class="icon profile-icon" src="https://picsum.photos/id/237/200/200" alt="Profile Icon">
  17.   </div>
  18. </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 -->

  1. header {
  2. background-color: #030052;
  3. padding: 1.5em;
  4. display: flex;
  5. justify-content: space-between;
  6. }
  7. .logo {
  8. max-width: 22%;
  9. align-self: center; /* addded this */
  10. }
  11. nav {
  12. width: 23%;
  13. margin: 0;
  14. display: flex;
  15. flex-direction: column;
  16. }

<!-- language: lang-html -->

  1. &lt;header class=&quot;flex&quot;&gt;
  2. &lt;img class=&quot;logo&quot; src=&quot;https://placekitten.com/100/100&quot; alt=&quot;MovOn Logo&quot;&gt;
  3. &lt;nav&gt;
  4. &lt;h2 class=&quot;inv&quot;&gt;Navigation&lt;/h2&gt;
  5. &lt;ul&gt;
  6. &lt;li&gt;&lt;a href=&quot;./index.html&quot; title=&quot;Home Page&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;
  7. &lt;li&gt;&lt;a href=&quot;./pages/explore.html&quot; title=&quot;Explore Page&quot;&gt;Explore&lt;/a&gt;&lt;/li&gt;
  8. &lt;li&gt;&lt;a href=&quot;./pages/mylist.html&quot; title=&quot;My list&quot;&gt;My List&lt;/a&gt;&lt;/li&gt;
  9. &lt;/ul&gt;
  10. &lt;/nav&gt;
  11. &lt;div class=&quot;profile-section&quot;&gt;
  12. &lt;div class=&quot;login-container&quot;&gt;
  13. &lt;a class=&quot;login-link subtext&quot; href=&quot;./pages/login.html&quot; title=&quot;Sign In Page&quot;&gt;Sign In&lt;/a&gt;
  14. &lt;a class=&quot;login-link subtext&quot; href=&quot;./pages/login.html&quot; title=&quot;LogIn Page&quot;&gt;Login&lt;/a&gt;
  15. &lt;/div&gt;
  16. &lt;img class=&quot;icon profile-icon&quot; src=&quot;https://picsum.photos/id/237/200/200&quot; alt=&quot;Profile Icon&quot;&gt;
  17. &lt;/div&gt;
  18. &lt;/header&gt;

<!-- 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.

  1. 我认为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 -->

  1. header {
  2. background-color: #030052;
  3. padding: 1.5em;
  4. display: flex;
  5. justify-content: space-between;
  6. }
  7. .logowrap {
  8. max-width: 22%;
  9. }
  10. .logo {
  11. max-width: 100%;
  12. }
  13. nav {
  14. width: 23%;
  15. margin: 0;
  16. display: flex;
  17. flex-direction: column;
  18. }

<!-- language: lang-html -->

  1. &lt;header class=&quot;flex&quot;&gt;
  2. &lt;div class=&quot;logowrap&quot;&gt;
  3. &lt;img class=&quot;logo&quot; src=&quot;https://place-hold.it/200x200&quot; alt=&quot;MovOn Logo&quot;&gt;
  4. &lt;/div&gt;
  5. &lt;nav&gt;
  6. &lt;h2 class=&quot;inv&quot;&gt;Navigation&lt;/h2&gt;
  7. &lt;ul&gt;
  8. &lt;li&gt;&lt;a href=&quot;./index.html&quot; title=&quot;Home Page&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;
  9. &lt;li&gt;&lt;a href=&quot;./pages/explore.html&quot; title=&quot;Explore Page&quot;&gt;Explore&lt;/a&gt;&lt;/li&gt;
  10. &lt;li&gt;&lt;a href=&quot;./pages/mylist.html&quot; title=&quot;My list&quot;&gt;My List&lt;/a&gt;&lt;/li&gt;
  11. &lt;/ul&gt;
  12. &lt;/nav&gt;
  13. &lt;div class=&quot;profile-section&quot;&gt;
  14. &lt;div class=&quot;login-container&quot;&gt;
  15. &lt;a class=&quot;login-link subtext&quot; href=&quot;./pages/login.html&quot; title=&quot;Sign In Page&quot;&gt;Sign In&lt;/a&gt;
  16. &lt;a class=&quot;login-link subtext&quot; href=&quot;./pages/login.html&quot; title=&quot;LogIn Page&quot;&gt;Login&lt;/a&gt;
  17. &lt;/div&gt;
  18. &lt;img class=&quot;icon profile-icon&quot; src=&quot;https://place-hold.it/200x200&quot; alt=&quot;Profile Icon&quot;&gt;
  19. &lt;/div&gt;
  20. &lt;/header&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年6月13日 01:13:02
  • 转载请务必保留本文链接：https://go.coder-hub.com/76458908.html
  • css
  • html
  • image
  • responsive
  • responsive-design
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定