Question

我的问题是使用响应式方法创建个人资料图片。我已经在Stack Overflow中注意到了一些页面（宽度：100％，高度：自动;）但是没有找到满足我需求的页面（可能还没有足够的挖掘），但问题是我喜欢标题带有一点信息和一些按钮的个人资料图片。

HTML：

<header class="header"> 
    <div class="header__inner">
        <img class="profile__img" src="tmp.png" />
        <div class="profile__info">
            <table>
                <tr>
                    <td>Nome:</td> 
                    <td>Rafael Dos Santos da Silva Rosario da Silva</td>
                </tr>   
                <tr>
                    <td>Idade:</td> 
                    <td>18</td>
                </tr>
                <tr>
                    <td>Aderiu:</td> 
                    <td>04-10-2015</td>
                </tr>
            </table>
            <table>
                <tr>
                    <td><a href="#add"><img class="add_friend" /></a></td>
                    <td>
                        <label for="sidebar__toggle">
                            <a><img class="more__info" /></a>
                        </label>
                    </td>
                    <td><a href="#note"><img class="show__notifications" /></a></td>
                </tr>
            </table>
        </div>
        <div class="profile__options">
            <table>
                <tr>
                    <td><a href="#fotos"><img class="show__gallerys" /></a></td>
                </tr>
                <tr>
                    <td><a href="#amigos"><img class="show__friends" /></a></td>
                </tr>
                <tr>
                    <td><a href="#amigos"><img class="show__messages" /></a></td>
                </tr>
            </table>
        </div>
    </div>
</header>

我正在使用带有媒体查询的flexbox来控制所有这3个（img，profile__info，profile__options），但无法找到地球上我应该如何拥有个人资料图片（维护它）比率）响应。以下是基本CSS：

.header__inner{
    display: flex;
    flex-wrap: wrap;
}
.header__inner{
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}
.profile__img{
    width: 25%;
}
.profile__info{
    width: 65%;
}
.profile__options{
    width: 12%;
}

媒体查询：

@media screen and (max-width: 550px){
    .profile__info{
        width: 63%;
    }
@media screen and (min-width: 551px){
    .profile__img{width: 17%}
    .profile__info{width: 60%;}
    .profile__options{width: 20%}
}
@media screen and (min-width: 650px){
    .profile__img{width: 15%;}
}
@media screen and (min-width: 850px){
    .profile__img{width: 20%; height: auto}
}

OBS：Here是演示页的链接。

Answer 1

将<img>标记包装到容器中，然后将CSS类移动到它。

<div class="profile__img"><img src="tmp.png" /></div>

在flexbox中保持图像宽高比

1 个答案: