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中正常显示？的主要内容，如果未能解决你的问题，请参考以下文章