我如何将图像放在表格之外并使其尺寸相同？

Question

我一直在尝试使图像的大小与表格相同，但是我没有使它起作用，有人可以给我提示吗？我从一个可能会有所更改的站点获得的联系表格，但需要在此之前解决。

<!-- 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 -->

enter image description here

Answer 1

如果需要，可以在位置relative和absolute处查看此技巧。 image的高度为.full的{​​{1}}容器的高度，具体取决于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%;
}

Answer 2

div#got-gridbox {
  padding: 20px;
  background: #F1F1F1;
  display: flex;
  flex-flow: row wrap
}
.movie_container {
  width: 180px;
  background: #ddd;
  padding: 10px;
  display: flex;
  flex-direction: column;
}
.movie_container img {
  width: 100%;
  opacity: 0;
}
 
.poster_2 {
  background: url('http://image.tmdb.org/t/p/w500//3tD0r8F6b7vygxZt3iRvf2ELwAO.jpg') no-repeat center center;
  background-size: cover;
  background-color: green;
  display: inline-block;
  flex: 1;
}

<div id="got-gridbox">
<div class="movie_container">
    <span>2015-08-01</span>
    <div class="poster_3">
        <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>
  <div class="movie_container">
    <span>2015-08-01</span>
    <div class="poster_2">
      <img src="http://image.tmdb.org/t/p/w500//3tD0r8F6b7vygxZt3iRvf2ELwAO.jpg" />
    </div>
  </div>
</div>

Answer 3

如果只希望它与表单具有相同的宽度和高度，则可以尝试此操作，并将img浮动设置为向左/向右

.image {
        float:left;
        display: inline-block;
        width: 400px;
        overflow:hidden;
    }
.image img
    {
        float:right;
    }

否则，您可以尝试：

.image img
    {
         width:100%;
    }