Question

我正在使用bootstrap v4。我有一个图像，我想将其拉伸（保持其宽高比）到页面的整个宽度，这将意味着图像/图像容器的高度可以更改。我还希望在图片的顶部和底部有一个div。

Bootstrap has void insertSAData(vector<json> saData){ sqlite3_mutex_enter(sqlite3_db_mutex(db)); char* errorMessage; sqlite3_exec(db, "PRAGMA synchronous=OFF", NULL, NULL, &errorMessage); sqlite3_exec(db, "PRAGMA count_changes=OFF", NULL, NULL, &errorMessage); sqlite3_exec(db, "PRAGMA journal_mode=MEMORY", NULL, NULL, &errorMessage); sqlite3_exec(db, "PRAGMA temp_store=MEMORY", NULL, NULL, &errorMessage); sqlite3_exec(db, "BEGIN TRANSACTION", NULL, NULL, &errorMessage); char const *szSQL = "INSERT INTO SA_DATA (DATA_ID,P_KEY,AMOUNT,AMOUNT_INDEX) VALUES (?,?,?,?);"; int rc = sqlite3_prepare(db, szSQL, -1, &stmt, &pzTest); if( rc == SQLITE_OK ) { for(int x=0;x<saData.size();x++){ // bind the value sqlite3_bind_int(stmt, 1, saData[x].at("lastSAId")); std::string hash = saData[x].at("public_key"); sqlite3_bind_text(stmt, 2, hash.c_str(), strlen(hash.c_str()), 0); sqlite3_bind_int64(stmt, 3, saData[x].at("amount")); string amount_index = saData[x].at("amount_idx"); sqlite3_bind_int(stmt, 4, atoi(amount_index.c_str())); sqlite3_step(stmt); sqlite3_finalize(stmt); } }else{ fprintf(stderr, "SQL error: %s\n", zErrMsg); sqlite3_free(zErrMsg); } sqlite3_mutex_leave(sqlite3_db_mutex(db)); }和row align-items-start曾经用来使div到达我想要的位置，但似乎没有用。

由于图像/容器div的大小调整，我不确定是否可以叠加所需的元素。可能我需要为此使用javascript。

HTML

row align-items-end

CSS

<div class="outer container-fluid">
    <img id="cats" class="img-fluid" src="http://placekitten.com/g/800/100">

    <div class="myboxes container-fluid">

        <div class="row align-items-start">
            <div class="col-1 redbox">Top</div>
        </div>
        <div class="row align-items-end">
            <div class="col-1 bluebox">Bottom</div>
        </div>

    </div>

</div>

Not working fiddle

Image of what I want

Answer 1

.outer {
    position: relative;
}
.redbox {
    background: rgba(255, 0, 0, 1);
    height: 20px;
}
.bluebox {
    background: rgba(0, 0, 255, 1);
    height: 20px;
}
#topBox, #bottomBox { 
  position:absolute;
  left:0
}
.img-fluid {
  width:100%;
  display: block;
}
#topBox {
  top:0
}
#bottomBox {
  bottom:0
}

<div class="outer container-fluid">
    <img id="cats" class="img-fluid" src="http://placekitten.com/g/800/100" />
    <div id="topBox" class="row align-items-start">
        <div class="col-1 redbox">Top</div>
    </div>
    <div id="bottomBox" class="row align-items-end">
        <div class="col-1 bluebox">Bottom</div>
    </div>
</div>

Answer 2

.container {
  width:100%;
  position:relative;
  padding:0px;
}

.img-fluid {
  width:100%;
}

.box {
  position:absolute;
  left:0px;
  height: 20px;
}

.top {
  top:0px;
  background: red;
}

.bottom {
  bottom:5px;
  background: blue;
}

<div class="container">
  <div class="box top">TOP</div>
  <div class="box bottom">BOTTOM</div>
  <img id="cats" class="img-fluid" src="http://placekitten.com/g/800/100"/>
</div>

非常有可能像您想要的那样叠加元素，也相当容易。您甚至不需要那么多的类和div。

在图片上覆盖div，不知道图片/容器div的高度

2 个答案: