Question

<!DOCTYPE html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <title>Demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container-fluid">
        <div class="row">
            <div class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3 col-lg-6 col-lg-offset-3">
                <div class="row">
                    <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
                        <a href="https://i.ytimg.com/vi/YJZqi7LAW3E/maxresdefault.jpg" target="_blank">
                            <img src="http://blog.kdongwon.com/attach/1/2081007732.jpg" class="img-rounded img img-responsive full-width" alt="Cinque Terre" style="max-height: 141px; max-width: inherit; height: 83px; width: 100%; border-radius: 0;">
                        </a>
                    </div>
                    <div class="col-xs-9 col-sm-9 col-md-9 col-lg-9" style="padding-left: 0px;">
                        <div class="panel-group">
                            <div class="panel panel-default">
                                <div class="panel-body" style="padding-top: 0px; padding-bottom: 2px; padding-left: 10px;">
                                    <h4><b>Paul</b></h4>
                                </div>
                                <div class="panel-body" style="padding-top: 2px;padding-bottom: 5px;">
                                    <h6>Hello</h6>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</body>

我希望此图片看起来像方形，如您在此页面上看到的那样：http://jsfiddle.net/rgsgdfsg/1/

但我有一个文本面板（在片段上，就像保罗打招呼一样）。

所以这个面板的高度必须是我图像的最小高度。

我想要这样的样本：https://www.esafety.gov.au/-/media/cesc/esafety-corporate/games-apps-social-networking/whatsapp/whatsapp-250x440-phone-screenshot-1.png?la=en&hash=26969C8298BD2AC533FE5F7B00AF868FD4B03F1D

就像那个样本一样，我想在谈话面板的左边显示一个图像。不丑。

问题： 我的图像怎么看起来不错？

对于方形和看起来很好的图像，我不关心图像的某些部分是否丢失。

我希望只有文本面板的宽度变短，而不是图像的宽度或高度。

Answer 1

将此添加到<a>元素

display: block;
width: 100px;
height: 100px;
overflow: hidden;

将此添加到<img>元素

height: 100%;

从max-width移除width和<img>。另请参阅max-width <img>两次风格。

Answer 2

添加固定宽度和高度的容器并溢出：隐藏。

在其中插入图像并使其居中。

https://css-tricks.com/centering-percentage-widthheight-elements/

我怎样才能让这张图片看起来很好看？

2 个答案: