如何使 html 元素随着图像高度的调整仅使用 css 和 html 上下移动

Question

我所做的所有研究都找到了调整图像大小的结果，我有。我需要 html 元素随着图像高度的变化而上下移动。

我有一张前景 header 图像，它会根据屏幕宽度调整大小。

i.e. width: 100%; height: changes; (This works)

我运行遇到的问题是图像下方的 html 元素不会随着图像大小的调整而改变位置（上下移动）。我只能使用 CSS 和 HTML。我不需要担心 IE 兼容性。

我包括所有 CSS 以确保您拥有所需的内容，但我认为 header、图片、img、.main、.pc 和 .mobile 将是唯一的 tags/classes 具有潜在影响。此外，所有相关的 HTML.

CSS

    <style>
    html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, fieldset, dl, dt, dd, ol, ul, li, form, label, table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: inherit;
    font-family: Arial, Sans-serif;
    color: inherit;
}
body {
    line-height: 1.2;
    font-size: 80%;
    background-color: #BEBEBE;
}
.wrapper {
    max-width: 710px;
    min-width: 710px;
    border-top: 5px solid #ffb500;
    margin: auto;
    background-color: #351C15;
    color: #FFF;
}
a {
    text-decoration: none;
    color: white;
}
a:hover {
    color: #ffb500;
}
.margin1 {
    margin-bottom: 10px;
    }
header {
    max-height: 200px;
    min-height: 190px;
    min-width: 480px;
}

.htable {
    z-index: 99;
    top: 10px;
    position: relative;
    display: table;
    text-align: center;
    font-weight: bold;
    font-size: 300%;
    width: 100%;
    margin: 10px 30px;
}
.htr {
    display: table-row;
}
.htd {
    display: table-cell;
    text-align: left;
    vertical-align: middle;
}
picture {
    top: 5px;
    position: absolute;
}
picture img {
    width: 100%;
    height: 100%;
    min-width: 480px;
}
.main {

}
section {
    font-size: 150%;
}
.pc {
    margin: 0 30px;
}
.mobile {
    visibility: hidden;
    position: absolute;
}
select {
    position: absolute;
    top: 0;
    width: 110%;
    height: 100%;
    padding: 5px 15px;
    border-radius: 0px;
    border: 1px solid #bebebe;
    font-size: 12px;
    font-weight: bold;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: transparent;
    padding-right: 27%;
    left: 0;
    cursor: pointer;
}
.select-wrapper {
    position: relative;
    display: block;
    width: 100%;
    margin-top: 10px;
    max-width: 250px;
    height: 37px;
    overflow: hidden;
    background: #fff;
}
.select-wrapper:before {
    content: url(/img/E210_wedge_down_32_white.png);
    position: absolute;
    text-align: center;
    top: 1px;
    width: 41px;
    height: 35px;
    background: #457508;
    speak: none;
    line-height: 2.3;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    right: 0;
}
label {
    margin-bottom: 20px;
}
.button {
    border: .1em solid #003436;
    background-color: #457508;
    overflow: visible;
    color: white;
    font-weight: 100%;
    font-size: 1em;
    line-height: 1.3em;
    padding: 10px 15px 10px;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    vertical-align: auto;
    box-sizing: border-box;
    -webkit-box-align: center;
    white-space: nowrap;
}
.button:hover {
    background-color: #58930a;
}
footer {
    text-align: center;
    padding-bottom: 10px;
    font-size: 85%;
}
li {
    display: inline;
    padding: 0px 2px;
}
 @media only screen and (max-width:480px) {
select, label, input, .select-wrapper, span {
    max-width: 100%;
    min-width: 100%;
}
.wrapper { min-width: 480px;}
.pc {
    visibility: hidden;
    position: absolute;
}
.mobile {
    padding: 0 30px;
    visibility: visible;
    position: initial;
}
.mobile .select-wrapper {
    max-width: none;
}
footer {
    padding: 0 30px 10px 30px;
}
.htable {
    top: 130px;
}
 }
</style>

HTML

<body>
<div class="wrapper">
  <header>
    <div class="htable">
      <div class="htr">
        <div class="htd"> <a href="repl_href"><img height="69" width="62"alt="logo" src="img/logo2.png" ></a></div>
        <div class="htd">
          <p>My Choice</p>
        </div>
      </div>
    </div>
    <picture>
      <source srcset="img/hero_landscape.png" media="(max-width: 480px)" />
      <img src="img/hero_pc.png" alt="Big Picture" width="710" height="200">
    </picture>
  </header>
  <!-- content -->
  <div class="main">
  <section class="pc">
    <form action="#top" name="frmCountry">
      <label for="countryList" class="margin1">Select your location:</label>
      <span class="select-wrapper margin1">
      <select id="coutyrList" name="dropdownList">
        <option value="repl_href">Schweiz - Deutsch</option>
        <option value="repl_href">United Kingdom - English</option>
      </select>
      </span>
      <input type="button" value="Go" class="button margin1" onClick="javascript:submitContent('frmCountry')">
    </form>
  </section>
  </div>
</body>

Answer 1

你有这个问题是因为你的图像是绝对定位的，这将它从正常流中移除，允许其他元素上升到它的位置。要查看此内容，请将其更改为 position:static 或将其完全删除，然后它就会消失，除非该页面可能无法正常运行。

Answer 2

与其他回答状态一样，您的问题是使用绝对定位项。

http://jsbin.com/maniyojucu/edit?html,css,output

即picture:

picture {
    top: 5px;
    /* position: absolute; */
    position: relative;
}

绝对项已从正常 DOM 流中删除，因此图片容器的高度与图片不一样。

您需要稍微调整一下 CSS/markup 以获得您想要的效果，但我的 fiddle 会为您指明正确的方向。

如何使 html 元素随着图像高度的调整仅使用 css 和 html 上下移动

How to make html elements move up/ down as image height resizes using only css and html

html

css

dynamic

responsive-design