Question

我一直在尝试在Bootstrap中编写一个简单的图库，但是，有一个不必要的间隙在列的右侧一次又一次地出现。我无法理解这种差距的原因。

以下是HTML代码：

<div class="row" id="r2">
        <div class="col-md-12" id="heading">
            <h1>| PROJECTS |</h1>
        </div>
    </div>
    <div class="row no-gutters">
        <div class="col-xs-12 col-sm-6 col-md-4">   
            <img src="img/9.jpg" style='width: 100%; object-fit: contain'>
            <div class="overlay">
                <div class="text">Hello World</div>
            </div>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-4 left">  
            <img src="img/10.jpg" style='width: 100%; object-fit: contain'>
            <div class="overlay">
                <div class="text">Hello World</div>                 
            </div>
        </div>  
        <div class="col-xs-12 col-sm-6 col-md-4 left">  
            <img src="img/11.jpg" style='width: 100%; object-fit: contain'>
            <div class="overlay">
                <div class="text">Hello World</div>
            </div>
        </div>
        <div class="clearfix"></div>
        <div class="col-xs-12 col-sm-6 col-md-4 left">  
            <img src="img/8.jpg" style='width: 100%; object-fit: contain'>
            <div class="overlay">
                <div class="text">Hello World</div>
            </div>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-4 left">  
            <img src="img/7.jpg" style='width: 100%; object-fit: contain'>
            <div class="overlay">
                <div class="text">Hello World</div>
            </div>
        </div>  
        <div class="col-xs-12 col-sm-6 col-md-4 left">  
            <img src="img/8.jpg" style='width: 100%; object-fit: contain'>
            <div class="overlay">
                <div class="text">View More..</div>
            </div>
        </div>
        <div class="clearfix"></div>                    
    </div>
    <div class="clear"></div>

以下是显示差距的网页截图：Right Side Gap

CSS代码：

.overlay {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0px;
      right: 0;
      height: 100%;
      width: 100%;
      opacity: 0;
      transition: .5s ease;
      background-color: black;
    }

    .overlay:hover {
      opacity: 0.8;
    }

    .text {
      color: white;
      font-size: 20px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      text-align: center;
    }
    #r2{
        background:#2952a3;
        margin:0;
        }

非常感谢任何形式的帮助！

Answer 1

我在这里看不到你的问题，所以它可能来自你的图像。尝试删除它们？

int width_frame, heigth_frame, num_frames;
 VideoCapture cap; 


void temp_rec(float* in, float* out, int w, float tau) {

    float yp;
    float tauo = 1 / tau;

    for (int i = 0; i<w;i++) {

        if (i == 0) {
            *out = tauo*(*in);
        }
        else {

            out -= 1;
            yp = *(out);
            out += 1;

            *(out) = tauo*(*(in)) + ((exp(-tauo))*yp);
        }
        out += 1;
        in += 1;//prepare for calculate next element

    }


}

Mat video_line_extractor(int whichrow) {//extract a row of frames

    // Create a VideoCapture object and open the input file
    // If the input is the web camera, pass 0 instead of the video file name
    cap = VideoCapture("a valid path");

    int frame_counter = 0;
    Mat M_temp = Mat::eye(width_frame, num_frames, CV_8UC3);

    // Check if camera opened successfully
    if (!cap.isOpened()) {
        cout << "Error opening video stream or file :(" << endl;
    }

    while (frame_counter<num_frames) {

        Mat frame;
        // Capture frame-by-frame
        cap >> frame;

        // If the frame is empty, break immediately
        if (frame.empty())
            break;

        cvtColor(frame, frame, CV_BGR2GRAY);



        for(int j=0;j<width_frame;j++) //we in above first extract a movie frame that as we know it is a image
            //in this 'for' we extract that row data with a pointer to one of the row in th M_temp  
        M_temp.at<uchar>(frame_counter , j) = frame.ptr<uchar>(whichrow)[j];

        frame_counter++;
    }

    // When everything done, release the video capture object
    cap.release();


    return M_temp;

}



int main() {

    cap=VideoCapture("a valid path");

    width_frame = cap.get(CV_CAP_PROP_FRAME_WIDTH);
    heigth_frame = cap.get(CV_CAP_PROP_FRAME_HEIGHT);
    num_frames = cap.get(CV_CAP_PROP_FRAME_COUNT);

    Mat image= Mat::zeros(width_frame, num_frames, CV_8UC3);//initalize input
    Mat image_o = Mat::zeros(width_frame, num_frames, CV_32FC3);//initialize output

    for (int jj = 0;jj < heigth_frame;jj++) {
        image = video_line_extractor(jj);

        for (int j = 0;j < width_frame;j++)
            temp_rec((float *)image.ptr<uchar>(j), (float *)image_o.ptr<uchar>(j), num_frames, 10);

    }


    imshow("Image", image);

    waitKey(0);
    return 0;
}

div.row > div {
  border: 1px solid #ddd;
  box-sizing: border-box;
  height: 50px;
}

引导行/列中无法解释的间隙

1 个答案: