Question

我正在尝试创建一个能够在所有桌面显示器屏幕尺寸上保持其比例的页面。

为此，我做了一个flex布局，其中我打算在其中一个细分中为一个图像设置一个小位置。

问题在于，一旦我将图像插入到标签中，容器flex元素就会不成比例地增长，从而破坏整个布局。任何人都有任何想法，为什么会这样？

以下是codepen和CSS。

<div id="main">
  <section id="profile-page" class="container">
    <div id="profile-picture-container">
       <div id="profile-picture">
          <img id="profile-picture-img " src="http://static.compare-    imports.com/thumbs/6/2014/8/3/Pixel-Pawn-TF362-Wireless-Remote-Flash-Trigger-For-1181993.jpg"></img>
       </div>
       <div id="speech-bubble">
       </div>
    </div>
    <div class="profile-details-container">
    </div>
  </section>
  <section id="side-page">

  </section>
</div>

如果删除图像，则布局应如此。一旦你添加它，父元素就会变得太大，从而破坏其他一切的流量。

Answer 1

您可以定义图像的最大宽度，因此不会影响它的父级：

#include <stdio.h>
#include <sys/types.h>
#include <sys/stat.h>
#include <dirent.h>
#include <unistd.h>
#include <stdlib.h>
#include <string.h>

#define SBUF 256
#define DBUF 256

    int main(int ac, char *argv[])
    {
      DIR* dir_ptr;     // the directory
      struct dirent* direntp;


      if( ac == 1 )
      {
        printf("Usage:  %s MOVE\n", argv[0] );
        exit(0);
      }


      if(ac>1 && ac<3)
      {
        printf("Error! few arguments provided " );
        exit(0);
      }

        char src_folder[SBUF];
        char dest_folder[DBUF];
        strcpy(src_folder, argv[1]);
        strcpy(dest_folder, argv[2]);


        dir_ptr = opendir("."); //open directory
        if ( dir_ptr == NULL )
        {
            perror( "." );
            exit( 1 );
        }

        while( (direntp = readdir( dir_ptr )) != NULL ) 
        {
            if (  strcmp(direntp->d_name, dest_folder) !=0) //search file or directory
            {
                printf("found the file %s", dest_folder);

                break;
            }else
                printf("not found");
                break;
        }
        rename(src_folder, dest_folder);
        closedir( dir_ptr );

        return 0;
    }

Answer 2

修复它需要为图像本身赋予宽度，否则它将使用它的自然宽度并忽略flex:1属性，因为这是HTML图像的工作方式。< / p>

将其更改为：

#profile-picture-img {
  width: 100%;
  background-color: blue;
}

为什么此图像的flex父元素超出了图像的大小？

2 个答案:

将其更改为：

Read more about this bug here