CSS图片放到<div>里面,自适应宽高全部显示,点击图片跳到新页面预览

有一个需求是图片放到一个固定宽高的

里面,不管是横图还是竖图,都要全部显示出来并且保持图片的长宽比例不变形,点击图片可以跳到一个新页面预览,代码如下:







图片显示




    
	
	



代码中的图片示例  3.jpg shutu.png 如下:

CSS图片放到<div>里面,自适应宽高全部显示,点击图片跳到新页面预览_第1张图片

CSS图片放到<div>里面,自适应宽高全部显示,点击图片跳到新页面预览_第2张图片  

附上一个img标签的object-fit属性:

CSS图片放到<div>里面,自适应宽高全部显示,点击图片跳到新页面预览_第3张图片

 

你可能感兴趣的:(css,前端)