Question

我正在尝试在div右侧设置图像。但不知何故，图像不适合div。 HTML：

            <div class="container" >
                <div class= "row list-container">
                <div class="col-md-10">
                <h3>This contains some description</h3>
                </div>
                <div class="col-md-2" >
                    <img src = "img/Websitebackground.jpg" class = "img-responsive">
                </div>
                </div>
            </div> <!-- /.container -->

CSS：

    #list-section{
    background:white;
    margin-top:100px;
    }
    .list-container{
        margin:20px;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

    }

演示：https://jsfiddle.net/sakib_rahman_cse11/czLvkr7z/

我想要的是这样的：http://imgur.com/a/x8lXs

Answer 1

如果我真的了解你......

图片具有默认属性display: inline-block;这会在图片下方产生5px空白区域。如果您要删除此5px空格，请设置：

.img-responsive { display: block;}

Answer 2

这看起来像你试图实现的东西吗？你可以玩宽度和高度（绝对或相对），但主要的想法是你使用background-image而不是<img>标签，并使用background-size:100% auto;使其响应如上所述 here。

<html>
<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <style>
    html, body, .container {
        width: 100%;
        height: 100%;
    }
    .desc-bg-div {
        height: 20%;        
        background-image: url("http://i.imgur.com/TpVSw4X.jpg");
        background-repeat: no-repeat;
        background-position: right;
        padding: 0;
        position: relative;
    }
    .opaque-div {   
        background: rgb(0, 0, 0); /* Fallback for older browsers without RGBA-support */
        background: rgba(0, 0, 0, 0.5);
        color: #ffffff;
        width: 100%;
        position: absolute;
        bottom: 0;
        text-align: center;
    }   
    </style>
</head>
<body>
    <div class="container" >                
        <div class="row outer">
            <div class="col-md-10">
                    <p>your content goes here</p>
            </div>
            <div class="col-md-2 desc-bg-div">              
                <div class="opaque-div">
                    <h3 class="description">This contains some description</h3>
                </div>
            </div>
        </div>
    </div> 
</body>
</html>

Answer 3

使用自适应标记

我使用了col-xs- *而不是col-md- *而且一切正常

    <div class="container" >
                <div class= "row list-container">
                <div class="col-xs-10">
                <h3>This contains some description</h3>
                </div>
                <div class="col-xs-2" style="padding:0 !important; margin: 0 !important">
                    <img src = "http://i.imgur.com/TpVSw4X.jpg" >
                </div>
                </div>
            </div> <!-- /.container -->

https://jsfiddle.net/sakib_rahman_cse11/czLvkr7z/

图像不适合div大小

3 个答案: