图像被裁剪而不是调整大小

Question

我想调整图片大小，但实际上它正在被剪裁！为什么？

HTML

var DeleteItems = $(".items li").length; //Delete Extra List
if (DeleteItems > 6) {
$('.items li').addClass('popup').not(':first-child').remove(); 
}; 

CSS

<div class='data_block'>
    <img src='https://www.blueskyexhibits.com/website/wp-content/uploads/sky-home.jpg' class='data_image'/>
     <div class='data_title'><p>
     <a href='article/".$row['ar_id']."'>gdfgdfgdfggdf</a></p>
     </div>
     <div class='data_desc'>
    <p>dfgdfgdfgdf</p>
  </div>
</div>

其余的css必要代码，你会在这里找到它：

jsfiddle

Answer 1

如果你将高度设置为自动，那么它不会被裁剪，但它会略微抛出描述，所以你必须调整边距顶部。我将它们调整为18％和15％这是fiddle

.data_block {
  background-color: #EFEFEF;
  width: 670px;
  height: 130px;
  margin-top:10px;
  margin-left: auto;
  margin-right: auto;
  border-bottom-left-radius: 10px;
  border-top-right-radius: 10px;
  overflow: hidden;
  
}
.data_image {
  width: 250px;
  height:auto;
  border-bottom-left-radius: 20px;
}
.data_title a
{
  font-size: 15px;
  font-family: "Century Gothic";
  font-weight: 600;
  vertical-align: top;
  float: right;
  margin-top:-19%;
  width:450px;
  margin-right: auto;
  margin-left:auto;
  text-align: center;
  text-decoration:none;
  color:#2E84C2;
}


.data_title:hover a
{
	color: #272727;
}

.data_desc {
  font-size: 14px;
  font-family: "Century Gothic";
  text-align: center;
  width:450px;
  float:right;
  margin-right:auto;
  margin-left:auto;
  margin-top: -15%;

}

<div class='data_block'>
	<img src='https://www.blueskyexhibits.com/website/wp-content/uploads/sky-home.jpg' class='data_image'/>
 	 <div class='data_title'><p>
   	 <a href='article/".$row['ar_id']."'>gdfgdfgdfggdf</a></p>
 	 </div>
 	 <div class='data_desc'>
    <p>dfgdfgdfgdf</p>
  </div>
</div>

Answer 2

您需要做的就是给父div赋予宽度，并为子ieimage标记赋予max-with属性。

// parent div css

.data_block {
  width: 250px;
}

// child img tag css

.data_image {
  border-bottom-left-radius: 20px;
  max-width: 100%;
}

请修改我在这里写的css并尝试。

我100％它将调整父div内的整个图像，而不会影响图像的纵横比，并且不会被裁剪而调整大小。

快乐的星期天。 ：）

Answer 3

也许这可能会有所帮助！

＆＃13;

＆＃13;

.data_image {   width: auto;   height:100%;   border-bottom-left-radius: 20px; }

＆＃13;

＆＃13;

＆＃13;