Question

我面临的问题是，我有两列。 1：图片 2：面板

当我调整浏览器窗口大小时，图像高度与面板相比正在下降。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="row">
                    <div class="col-md-6 col-sm-6">
                        <a target="_blank" href="">
                            <div class="theme_view">
                                <img class="img-responsive" src="http://www.w3schools.com/css/img_fjords.jpg" alt="">
                                
                            </div>
                        </a>
                    </div>

                    <div class="col-md-6 col-sm-6 col-xs-12">

                        <div class="panel panel-default set_padding_0 set_margin_0" >
                            <div class="panel-heading text-center">
                                 <span class="font_size_14">Theme Name</span>
                            </div>
                            <div class="panel-body">
                                <div class="row">
                                    <div class="col-md-6 col-sm-12 col-xs-12">
                                        <div class="radio">
                                        </div>

                                    </div>
                                    <div class="col-md-6 col-sm-12 col-xs-12">
                                        <div class="radio">
                                            <label class="i-checks">
                                                <input value="option2" checked="" disabled="" type="radio">
                                                <i></i>
                                                Personal Domain Name
                                            </label>
                                        </div>
                                    </div>
                                </div>

我缺少哪里？

任何帮助都会很棒。

谢谢。

Answer 1

试试这个： 你可以指定你想要的东西

<img class="image" src="http://www.w3schools.com/css/img_fjords.jpg" alt="">


.image {
    height: 650px;
    width: 100%;
    object-fit: cover; // here
}

Answer 2

我认为你必须创建一个元素并为其设置类“容器”并将两个div放入其中： .container设置宽度为元素固定 .try这段代码：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="row">
               <div class="container">
                    <div class="col-md-6 col-sm-6">
                        <a target="_blank" href="">
                            <div class="theme_view">
<img class="img-responsive" src="http://www.w3schools.com/css/ img_fjords.jpg"alt=""> 

                            </div>
                        </a>
                    </div>


                    <div class="col-md-6 col-sm-6 col-xs-12">

                        <div class="panel panel-default set_padding_0 set_margin_0" >
                            <div class="panel-heading text-center">
                                 <span class="font_size_14">Theme Name</span>
                            </div>
                            <div class="panel-body">
                                <div class="row">
                                    <div class="col-md-6 col-sm-12 col-xs-12">
                                        <div class="radio">
                                        </div>

                                    </div>
                                    <div class="col-md-6 col-sm-12 col-xs-12">
                                        <div class="radio">
                                            <label class="i-checks">
                                                <input value="option2" checked="" disabled="" type="radio">
                                                <i></i>
                                                Personal Domain Name
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </div>

Bootstrap：调整窗口大小时图像高度降低

2 个答案: