无法弄清楚如何使div较小时使div中的图片不被剪切

debugcn 发表于 Dev

艾迪

大家好，我开始用Bootstrap 3学习HTML / CSS，这是我的第三天，我有点问题，我不知道如何解决。

我尝试了一些我在互联网上发现的东西，例如使其在移动设备和平板电脑屏幕上具有响应性，因此它改变了尺寸，但更像是一次失败。

在此先感谢您，我的英语不好。

PS：我之所以没有发布此帖子，是因为我只能发布1个链接。

我拿出了Dropox链接，改用它了

http://jsfiddle.net/52VtD/2739/

感谢您告诉我JSFiddle。

<!DOCTYPE html>

    <head>

            <link rel="stylesheet" type="text/css" href="style.css">

            <title>Title</title>
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <link href = "css/bootstrap.min.css" rel = "stylesheet">
            <link href = "css/styles.css" rel = "stylesheet" media="all and (max-width: 1024px)">>
    </head>
    <body id="bd">

            <div id="navbar"class = "navbar navbar-inverse navbar-static-top ">
                    <div class = "container">

                            <a href = "#" class = "navbar-brand">Your Title Goest Here</a>

                            <button class = "navbar-toggle" data-toggle = "collapse" data-target = ".navHeaderCollapse">
                                    <span class = "icon-bar"></span>
                                    <span class = "icon-bar"></span>
                                    <span class = "icon-bar"></span>
                            </button>

                            <div class = "collapse navbar-collapse navHeaderCollapse">

                                    <ul class = "nav navbar-nav navbar-right">

                                            <li class = "active"><a href = "#">Who are we </a></li>
                                            <li><a href = "#">Our products</a></li>
                                            <li><a href = "#">Contact Us</a></li>
                                            <li><a href = "#">F.A.Q</a></li>

                                    </ul>

                            </div>

                    </div>
            </div>

        <div id = "a1" >
            <a  href="#bd" class = "btn btn-info pull-right " id="buttonTop">Go Up</a>
            <div id = "whoarewe">

            </div>  


        </div>  



    <div class = "navbar navbar-inverse navbar-fixed-bottom">

        <div class = " container ">
            <a href = "http://www.google.ro" class = "navbar-btn btn-danger btn pull-right">Grab Your Gift</a>
            <p class = "navbar-text pull-right">Do not miss our 10% off gift !</p>

        </div>

    </div>





    </body>


<script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src = "js/bootstrap.js"></script>

马克西姆·格拉德科夫（Maksim Gladkov）

您可以添加background-size: contain;到您的#whoarewe风格。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。