CSS实现图片尺寸响应式变更

基础的实现方法，可以使用and连接多个条件

/*响应式更改视频封面尺寸*/
/*媒体查询的尺寸参数可以在浏览器的响应式模式下观察*/
/*当前使用的图片宽高比为1.578125*/
@media (max-width: 1920px) and (min-width: 1200px){
	.thumbnail > img,
	.thumbnail a > img {
		max-width: 100%;
		height: 160px !important;
	}
}
@media (max-width: 1199px) and (min-width: 992px){
	.thumbnail > img,
	.thumbnail a > img {
		max-width: 100%;
		height: 128px !important;
	}
}
@media (max-width: 991px) and (min-width: 768px){
	.thumbnail > img,
	.thumbnail a > img {
		max-width: 100%;
		height: 230px !important;
	}
}
@media (max-width: 767px) and (min-width: 600px){
	.thumbnail > img,
	.thumbnail a > img {
		max-width: 100%;
		height: 407.58px !important;
	}
}
@media (max-width: 599px) and (min-width: 416px){
	.thumbnail > img,
	.thumbnail a > img {
		max-width: 100%;
		height: 302.89px !important;
	}
}
/*iPhone 6/7/8 Plus iOS11尺寸*/
@media (max-width: 415px) {
	.thumbnail > img,
	.thumbnail a > img {
		max-width: 100%;
		height: 240px !important;
	}
}

通过浏览器响应式模式，根据不同屏幕宽度下观察图片当前宽度，然后用width值除以宽高比即可得出当前图片合适的高度值。
（如果用JS实现的话就可以直接用代码处理图片宽高值了，这里只是使用CSS实现方法较为繁琐）

以下是结合bootstrap框架项目中的效果

@media (max-width: 1920px) and (min-width: 1200px)
对应栅格col-md-3

@media (max-width: 1199px) and (min-width: 992px)
对应栅格col-md-3

@media (max-width: 991px) and (min-width: 768px)
对应栅格col-sm-6

@media (max-width: 767px) and (min-width: 600px)

@media (max-width: 599px) and (min-width: 416px)

/*iPhone 6/7/8 Plus iOS11尺寸*/
@media (max-width: 415px)