时间戳

首页 > 解决方案 > 我如何将图像放在表格之外并使其大小相同？

javascript - 我如何将图像放在表格之外并使其大小相同？

问题描述

我一直在尝试使图像与表单大小相同，但我无法正常工作，你们中的某个人可以给我一个提示吗？我从一个网站得到的这个联系表，我会稍微改变一下，但需要先解决这个问题。

<!-- CODE CSS -->
.full {
	display: inline-block;
}
.fullform {
	width: 400px;
	float: left;
	display: inline-block;
}

.image {
	float:left;
	display: inline-block;
}
<!-- Full div -->

<div class="full">
    <div class="fullform">
        <div class="form-top">
        <h3>Contact us</h3>
        <p>Fill in the form below to send us a message:</p>
    </div>
    <div class="form-bottom contact-form">
        <form role="form" action="KONTAKTFORM/assets/contact.php" method="post">
    	<div class="form-group">
    	    <label class="sr-only" for="contact-email">Email</label>
    	    <input type="text" name="email" placeholder="Email..." class="contact-email form-control" id="contact-email">
    	</div>
    	<div class="form-group">
    	    <label class="sr-only" for="contact-subject">Subject</label>
    	    <input type="text" name="subject" placeholder="Subject..." class="contact-subject form-control" id="contact-subject">
    	</div>
    	<div class="form-group">
    	    <label class="sr-only" for="contact-message">Message</label>
    	    <textarea name="message" placeholder="Message..." class="contact-message form-control" id="contact-message"></textarea>
    	</div>
    	<div class="form-group">
    	    <label for="contact-antispam">Antispam question: 7 + 5 = ?</label>
    	    <input type="text" name="antispam" placeholder="Your answer..." class="contact-antispam form-control" id="contact-antispam">
    	</div>
    	<button type="submit" class="btn">Send message</button>
    </form>
</div>
</div>
    <div class="image">
        <img src="gavle.jpg">
    </div>
</div>

<!-- End of div -->

在此处输入图像描述

标签： javascripthtmlcss

解决方案

如果需要，请查看此技巧与位置relative。absolute将image采用容器的高度，.full即auto，取决于.fullform

.full {
  position: relative;
  width: 100%;
  height: auto;
  background-color: yellow;
}
.fullform {
  width: 50%;
  background-color: tomato;
}
.image {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 50%;
  overflow: hidden;
}
.image > img { /*img take 100% width and height (optional)*/
    width: 100%;
    height: 100%;
}
<!-- Full div -->
<div class="full">
  <div class="fullform">
    <div class="form-top">
      <h3>Contact us</h3>
      <p>Fill in the form below to send us a message:</p>
    </div>
    <div class="form-bottom contact-form">
      <form role="form" action="KONTAKTFORM/assets/contact.php" method="post">
        <div class="form-group">
          <label class="sr-only" for="contact-email">Email</label>
          <input type="text" name="email" placeholder="Email..." class="contact-email form-control" id="contact-email">
        </div>
        <div class="form-group">
          <label class="sr-only" for="contact-subject">Subject</label>
          <input type="text" name="subject" placeholder="Subject..." class="contact-subject form-control" id="contact-subject">
        </div>
        <div class="form-group">
          <label class="sr-only" for="contact-message">Message</label>
          <textarea name="message" placeholder="Message..." class="contact-message form-control" id="contact-message"></textarea>
        </div>
        <div class="form-group">
          <label for="contact-antispam">Antispam question: 7 + 5 = ?</label>
          <input type="text" name="antispam" placeholder="Your answer..." class="contact-antispam form-control" id="contact-antispam">
        </div>
        <button type="submit" class="btn">Send message</button>
      </form>

    </div>
  </div>
  <div class="image">
    <img src="https://picsum.photos/500">
  </div>
</div>
<!-- End of div -->

推荐阅读