Question

我在同一行有两张图片，但我希望这些图片也有相同的高度。

这是我现在的代码：

HTML：

#include <stdio.h>

int main() {
    int i;
    while (1) {
        printf("Enter no?\n"); // step -1

        if (scanf_s(" %d", &i) > 0) {   // step-2
            printf("Num=%d\n", i);
            break;
        }
        else {
            printf("Entered character.Pls enter int\n");
            fseek(stdin, 0, SEEK_END);
        }
    }
}

CSS：

<div>
 <div class="img1">
  <img src="http://www.immobiliaredelcentromodena.com/wp-content/uploads/2017/02/esterno-agenzia.jpg">
 </div>
 <div class="img2">
  <img src="http://www.immobiliaredelcentromodena.com/wp-content/uploads/2017/02/interno-agenzia.jpg">
 </div>
<div>

我尝试使用没有宽度的.img1 { float:left; width:30%; } .img2 { float:right; width:60%; }属性，但它不起作用。

这就是我想要的：

Answer 1

看起来您的图片会很好地相互调整大小，因此您可以使用display:flex轻松实现布局：

＆＃13;

.wrapper {
  display: flex;
  flex-direction: row;
  width: 100%;
}
.wrapper > div:first-child {
  margin-right: 15px;
}
.wrapper img {
  display: block;
  max-width: 100%;
}

＆＃13;

<div class="wrapper">
  <div class="img1">
    <img src="http://www.immobiliaredelcentromodena.com/wp-content/uploads/2017/02/esterno-agenzia.jpg">
  </div>
  <div class="img2">
    <img src="http://www.immobiliaredelcentromodena.com/wp-content/uploads/2017/02/interno-agenzia.jpg">
  </div>
  <div>

＆＃13;

如果您使用代码段中的整页链接，则可以看到页面调整大小时，图片会调整大小。

如果您的图像以不同的高度开始，那么您可以希望的最佳效果类似于以下内容，但正如您将看到的那样会有剪裁而图像不会居中

＆＃13;

.wrapper {
  display: flex;
  flex-direction: row;
  width: 100%;
}
.wrapper div {
  overflow: hidden;
}
.wrapper img {
  display: block;
  width: auto;
  height: 100%;
}

＆＃13;

<div class="wrapper">
  <div class="img1">
    <img src="http://lorempixel.com/200/600/sports/1/">
  </div>
  <div class="img2">
    <img src="http://lorempixel.com/800/400/sports/2/">
  </div>
  <div>

＆＃13;

Answer 2

您可以使用CSS中的height property来定义元素高度。

尝试：

.img1 {
    float:left;
    width:30%;
    height:100px;
}

.img2 {
    float:right;
    width:60%;
    height:100px;
}

Answer 3

这样的事情怎么样：

https://jsfiddle.net/6n5oqamk/1/

使用background-image css-element

CSS：

.img1 {
  float:left;
  width:30%;
  height: 750px;
  padding-right: 50px;
  background-image: url('http://www.immobiliaredelcentromodena.com/wp-content/uploads/2017/02/esterno-agenzia.jpg');
}

.img2 {
  float:right;
  width:60%;
  height: 750px;
  background-image: url('http://www.immobiliaredelcentromodena.com/wp-content/uploads/2017/02/interno-agenzia.jpg'); 
}

HTML：

<div>
  <div class="img1"></div>
  <div class="img2"></div>
<div>

Answer 4

最大高度意味着图片不会超过这个高度，但如果他们不需要它们也不会使用它。

你需要的是正常身高。

您的问题可能是它会被裁剪或变形。

两种可能的方式：

object-fit:cover - not working for IE/Edge

或者您切换到背景图片制作

background-size:cover

Answer 5

您应该将图像添加为背景：

jsfiddle：jsfiddle.net/s6gje0cd

＆＃13;

.imgs-container {
  height: 500px;
}

.img1 {
  float: left;
  width: 30%;
  height: 100%;
  background-image: url("http://www.immobiliaredelcentromodena.com/wp-content/uploads/2017/02/esterno-agenzia.jpg");
  background-repeat: no-repeat;
  background-size: cover;
}

.img2 {
  float: right;
  width: 60%;
  height: 100%;
  background-image: url("http://www.immobiliaredelcentromodena.com/wp-content/uploads/2017/02/interno-agenzia.jpg");
  background-repeat: no-repeat;
  background-size: cover;
}

＆＃13;

<div class="imgs-container">
  <div class="img1">
    <!--<img src="http://www.immobiliaredelcentromodena.com/wp-content/uploads/2017/02/esterno-agenzia.jpg">-->
  </div>
  <div class="img2">
    <!--<img src="http://www.immobiliaredelcentromodena.com/wp-content/uploads/2017/02/interno-agenzia.jpg">-->
  </div>
  <div>

＆＃13;

两个图像在同一行并具有相同的高度CSS

5 个答案: