html – 如何使图像适合div wather图像大小最大然后div或min然后div

前端之家收集整理的这篇文章主要介绍了html – 如何使图像适合div wather图像大小最大然后div或min然后div前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
如何在div中拟合图像?图像大小可以是最大,然后是div或min然后是div.

HTML代码

@H_301_4@<div class="main"> <img scr="image.jpg"> </div>

CSS代码

@H_301_4@.main{ height:200px; width:200px; } img{ // answer code }

如何设置图像css如下:

>图像高度100和宽度100
>图像高度300和宽度300

解决方法

您可以使用 :- @H_301_4@img { max-width: 100%; height: auto; } // This would help you to automatically fit the image.

编辑:

上面的css代码可以帮助您处理大小大于div的图像.但是不适合小于div的图像.为实现目标需要一点JQuery,请在下面找到: –

@H_301_4@$(document).ready(function(){ imageWidth = $('.main img').width(); parentWidth = $('.main').width(); if (imageWidth > parentWidth) { $('.main img').css('width','100%'); } });

当图像小于div时它会调整自身并根据您的要求适合div.

因此,将css和脚本放在两个条件下都可以使用.

猜你在找的HTML相关文章