html - 保持图像纵横比的图像表-6ren

html - 保持图像纵横比的图像表

转载作者：太空宇宙更新时间：2023-11-04 09:30:24

我目前有一个表格设置，可以将图像保存在不同大小的表格中，并且能够相应地调整图像的大小。如何使图像保持宽高比？

/* THIS PART IS FOR PAGE SETUP*/

.page-wrap {
  min-height: 100%;
  /* equal to footer height */
}
.page-wrap:after {
  content: "";
  display: block;
}
.site-footer,
.page-wrap:after {
  margin: 0;
  margin-top: 100px;
}
.site-footer {
  border-top: 2px dashed #95a0b7;
  margin-left: auto;
  margin-right: auto;
}
/* this is styling! */

.post {
  color: #843900;
  font-family: Calibri;
  font-size: 112%;
  border: 2px solid #;
  padding-left: 10px;
  padding-top: 5px;
  padding-bottom: 5px;
  margin-left: 10;
}
html,
body {
  background-color: #d1d6e0;
  height: 100%;
}
/* THIS STUFF IS FOR DESIGN */

table {
  width: 100%;
  height: 100%;
}
td {
  padding-left: 10px;
  padding-bottom: 10px;
}
th {
  text-align;
  left;
}
.postTableBorder {
  border-bottom: 1px dashed #95a0b7;
}
.footer {
  text-align: center;
  color: #843900;
  font-family: Calibri;
  font-size: 112%;
  padding-bottom: 10px;
  font-weight: bold;
}
h1 {
  color: #843900;
  font-family: Calibri;
  font-size: 500%;
  text-align: center;
  margin: 0;
  border-bottom: 5px dotted #95a0b7;
}
a {
  text-decoration: none;
  color: #843900;
  text-shadow: 1px 1px 2px #662c00;
}
a:hover {
  color: #662c00;
}
.headerP {
  font-weight: bold;
  color: #843900;
  font-family: Calibri;
  font-size: 150%;
}
.headerPselected {
  font-weight: bold;
  color: #843900;
  font-family: Calibri;
  font-size: 150%;
  border-solid: solid 2px #7684a2;
}
.image {
  position: relative;
  width: 100%;
  /* for IE 6 */
  box-shadow: -1px -1px 3px #0a0c0f, 1px 1px 3px #47566b;
  line-height: 0;
}
.imageTD {
  vertical-align: top;
  padding-bottom: 10px;
}
h2 {
  position: absolute;
  bottom: 0px;
  left: 10px;
  width: 100%;
  color: black;
  font-family: Calibri;
}
/* COLORS FOR H2*/

.blue {
  color: #0033cc;
  text-shadow: 1px 1px 1px #002699;
}
.red {
  color: #4d0000;
  text-shadow: 1px 1px 1px #1a0000;
}
.imageLink:hover {
  opacity: 0.66;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <link rel="stylesheet" href="css/main.css">
  <meta charset="UTF-8">
  <title>Marc</title>
</head>

<body>

  <div class="page-wrap">
    <header>
      <h1>
                    <a href = "main.html"> Homeless Helpers</a>
                </h1>
      <table class="headerTable" , width="100%">
        <tr>
          <th width="20%">
            <p class="headerP">
              <a href="message.html">Message</a>
            </p>
          </th>
          <th width="20%">
            <p class="headerP">
              <a href="life.html">Goal</a>
            </p>
          </th>
          <th width="20%">
            <p class="headerP">
              <a href="videos.html">Testimonials</a>
            </p>
          </th>
          <th width="20%">
            <p class="headerP">
              <a href="documentation.html">Media</a>
            </p>
          </th>
          <th width="20%">
            <p class="headerP">
              <a href="documentation.html">Donate</a>
            </p>
          </th>
        </tr>
      </table>
    </header>

    <table>
      <tr>
        <td width="33%">
          <div class="image">
            <a href="code.html">
              <div style='width:100%;height:100%'>
                <img src='imgs/tweepy.png' style='width:100%;height:500px' alt='[]' class="imageLink" />
                <h2 class="blue"> Care Packages</h2>
              </div>
            </a>
          </div>
        </td>
        <td width="33%" , class="imageTD">
          <div class="image">
            <div style='width:100%;height:100%'>
              <img src='http://placehold.it/1000x1000' style='width:100%;height:500px' alt='[]' , align="top" />
            </div>
          </div>
        </td>
        <td width="33%" , class="imageTD">
          <div class="image">
            <div style='width:100%;height:100%'>
              <img src='http://placehold.it/1000x1000' style='width:100%;height:500px' alt='[]' , align="top" />
            </div>
          </div>
        </td>
      </tr>
    </table>
    <table>
      <tr>
        <td width="25%" , class="imageTD">
          <div class="image">
            <div style='width:100%;height:100%'>
              <img src='http://placehold.it/1000x1000' style='width:100%;height:300px' alt='[]' />
            </div>
          </div>
        </td>
        <td width="25%" , class="imageTD">
          <div class="image">
            <div style='width:100%;height:100%'>
              <img src='http://placehold.it/1000x1000' style='width:100%;height:300px' alt='[]' />
              <h2 class="red"> This is a test red</h2>
            </div>
          </div>
        </td>
        <td width="50%" , class="imageTD" , rowspan="2">
          <div class="image">
            <div style='width:100%;height:100%'>
              <img src='http://placehold.it/1000x1000' style='width:100%;height:614px' alt='[]' />
              <h2 class="red"> This is a test red</h2>
            </div>
          </div>

        </td>
      </tr>
      <tr>
        <th colspan="2" , width="50%" , class="imageTD">
          <div class="image">
            <div style='width:100%;height:100%'>
              <img src='http://placehold.it/1000x300' style='width:100%;height:300px' alt='[]' />

            </div>
          </div>
        </th>
      </tr>
    </table>




  </div>
  <footer class="site-footer">
    <p class="footer">
      made by awesome people.
    </p>
  </footer>
</body>

</html>

我怎样才能让图像在调整窗口大小时保持 4:3 的比例？

最佳答案

更改 <img>到 auto 的高度作品。 https://jsfiddle.net/JustusFT/3qtb1r9v/

不过，我建议你使用网格系统，例如bootstrap。而不是使用表格。

HTML:

<div class="page-wrap">
  <header>
    <h1>
                    <a href = "main.html"> Homeless Helpers</a>
                </h1>
    <table class="headerTable" , width="100%">
      <tr>
        <th width="20%">
          <p class="headerP">
            <a href="message.html">Message</a>
          </p>
        </th>
        <th width="20%">
          <p class="headerP">
            <a href="life.html">Goal</a>
          </p>
        </th>
        <th width="20%">
          <p class="headerP">
            <a href="videos.html">Testimonials</a>
          </p>
        </th>
        <th width="20%">
          <p class="headerP">
            <a href="documentation.html">Media</a>
          </p>
        </th>
        <th width="20%">
          <p class="headerP">
            <a href="documentation.html">Donate</a>
          </p>
        </th>
      </tr>
    </table>
  </header>

  <table>
    <tr>
      <td width="33%">
        <div class="image">
          <a href="code.html">
            <div style='width:100%;height:100%'>
              <img src='imgs/tweepy.png' style='width:100%;height:auto' alt='[]' class="imageLink" />
              <h2 class="blue"> Care Packages</h2>
            </div>
          </a>
        </div>
      </td>
      <td width="33%" , class="imageTD">
        <div class="image">
          <div style='width:100%;height:100%'>
            <img src='http://placehold.it/1000x1000' style='width:100%;height:auto' alt='[]' , align="top" />
          </div>
        </div>
      </td>
      <td width="33%" , class="imageTD">
        <div class="image">
          <div style='width:100%;height:100%'>
            <img src='http://placehold.it/1000x1000' style='width:100%;height:auto' alt='[]' , align="top" />
          </div>
        </div>
      </td>
    </tr>
  </table>
  <table>
    <tr>
      <td width="25%" , class="imageTD">
        <div class="image">
          <div style='width:100%;height:100%'>
            <img src='http://placehold.it/1000x1000' style='width:100%;height:auto' alt='[]' />
          </div>
        </div>
      </td>
      <td width="25%" , class="imageTD">
        <div class="image">
          <div style='width:100%;height:100%'>
            <img src='http://placehold.it/1000x1000' style='width:100%;height:auto' alt='[]' />
            <h2 class="red"> This is a test red</h2>
          </div>
        </div>
      </td>
      <td width="50%" , class="imageTD" , rowspan="2">
        <div class="image">
          <div style='width:100%;height:100%'>
            <img src='http://placehold.it/1000x1000' style='width:100%;height:auto' alt='[]' />
            <h2 class="red"> This is a test red</h2>
          </div>
        </div>

      </td>
    </tr>
    <tr>
      <th colspan="2" , width="50%" , class="imageTD">
        <div class="image">
          <div style='width:100%;height:100%'>
            <img src='http://placehold.it/1000x300' style='width:100%;height:auto' alt='[]' />

          </div>
        </div>
      </th>
    </tr>
  </table>




</div>
<footer class="site-footer">
  <p class="footer">
    made by awesome people.
  </p>
</footer>