css怎么让一张图片在固定大小的div中正常显示?

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了css怎么让一张图片在固定大小的div中正常显示?相关的知识,希望对你有一定的参考价值。

div固定大小,图片可能大或者小

参考技术A

方法:

    得到对应div的宽度和高度

    把图片设置宽度或高度(图片会根据宽度或者高度进行等比例缩放,这样就不会失真,显示正常)

示例:

<!DOCTYPE html>
<html>
<head>
<title>测试图片在固定尺寸的Div内是否会失真</title>
</head>
<body>
<div style="width: 400px; border: 1px solid #000; height: 400px;">
<img src="https://gss0.bdstatic.com/7051cy89RcgCncy6lo7D0j9wexYrbOWh7c50/zhidaoribao/2017/1229/top.png" style="width: 380px; margin: 10px;">
</div>
</body>
</html>

效果:

产品管理页中,如何只显示多个正常大小的详情图片的第一张

效果图

 

一、为Product的bean类中,增加属性firstProductImage

二、在ProductDAO类中,定义setFirstProductImage(Product p,String tyle)方法,将type="type_single"集合中的第一张图片,存储在Product对象的ProductImage对象属性。

另外,在list(int start,int count,Category category)方法中,记得最后调用前面定义的setFirstProductImage(Product p,String tyle)方法,保存好ProductImage对象属性。同理get(int id)方法。

 

三、在ProductImageDAO类中,重生list(int pid,String type)方法,根据type值的不同分别返回缩略图和详情图的图片集合

四、建立四个文件夹

 五、在ProductimageServlet类中的add方法中处理文件上传。

 六、productList.jsp

 相关项目包下载

以上是关于css怎么让一张图片在固定大小的div中正常显示?的主要内容,如果未能解决你的问题,请参考以下文章