添加带有CSS边框的缩略图图像

Question

我正在尝试重新创建Lynda.com的课程列表缩略图图像（请参阅here）。我不确定如何将图像放置在我现有的代码here中。我不确定的是每次图像的尺寸，如果我的描述确实很长并且加宽了边框，我不确定如何处理图像调整大小。我该怎么办？

[如果情况变得更糟，我将在此不再赘述。我还意识到，如果描述变得更长，如果图像也变大，则图像变大的副作用将与页面上的其他缩略图不一致。

HTML：

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"

<a class="course_list_link" href=""> 
<p class = "course_list_border"> 
  <strong> Title </strong> <br/> <br/>    
  description <br/> <br/>  
  skill_level  &emsp; 
  date &emsp; 
  Views: views &emsp; 
subject </p> </a>

CSS：

.course_list_border{
    border-style: solid;
    border-width: 1px;
    border-color: #DCDCDC;
    padding: 10px;
    word-wrap: break-word;
}

.course_list_border:hover{
    background-color: #F8F8F8;
    cursor: pointer;
}

.course_list_link{
    color: black;
}

.course_list_link:hover{
    text-decoration: none;
    color: black;
}

body {
    min-height: 400px;
    margin-bottom: 100px;
    margin-top: 0%;
    clear: both;
    padding-top: 55px;
    font-family: 'Roboto', sans-serif;
    font-size: 16.5px;
}

Answer 1

我已经对您的CSS和HTML文件进行了一些更改

.course_list_border{
	border-style: solid;
	border-width: 1px;
	border-color: #DCDCDC;
	padding: 10px;
	word-wrap: break-word;
}

.course_list_border:hover{
	background-color: #F8F8F8;
	cursor: pointer;
}

.course_list_link{
	color: black;
	display: inline-block;
	width: 30%;
}

.course_list_link:hover{
	text-decoration: none;
	color: black;
}

body {
	min-height: 400px;
	margin-bottom: 100px;
	margin-top: 0%;
	clear: both;
	padding-top: 55px;
	font-family: 'Roboto', sans-serif;
	font-size: 16.5px;
}

<a class="course_list_link" href=""> 
	  <p class = "course_list_border"> 
		<strong> Title </strong> <br/> <br/>    
		description <br/> <br/>  
		<img src="https://via.placeholder.com/200X150" alt="Lights" style="width:100%"/>
		skill_level  &emsp; 
		date &emsp; 
		Views: views &emsp; 
	  subject </p> 
	</a>

当您使用引导程序时，您也可以利用现有的类来创建此类图像缩略图

https://getbootstrap.com/docs/4.0/content/figures/