Question

我有以下简单的HTML和CSS：

.profile {
  width: 80%;
  margin-top: 15vh;
  margin-left: 10%;
  display: flex;
  float: left;
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
  background-color: green;
}

.profile_picture {
  float: left;
  width: 100%;
  height: 70%;
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
}

.profile_picture img {
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
}

.profile_discription {
  padding: 1%;
  float: left;
}

<div class="profile">
		
  <div class="profile_picture">
  <img src="http://placehold.it/450x150">
  </div>
			
  <div class="profile_description">
  <p> Description goes here. </p>
  </div>
			
<div>

该代码显示一个网站，其配置文件由图片和描述组成。
您还可以在jsfiddle here中找到代码。

到目前为止，所有这些都工作正常。

但是，问题是，一旦我们在类display: flex;中使用了.profile属性，根据使用的是Edge，Firefox还是Chrome，图片将以不同的大小显示。

您知道我如何避免使用不同尺寸的图片并且仍然能够使用display:flex;属性吗？

如果使用了display flex属性，图像的缩放比例会因浏览器而异

0 个答案: