Comment rendre une image sensible dans une div
Mon code est comme suit:
<div class="abc">
<div class="bcd">
<a href="#">
<img class="img1" width="50" height="50"/>
</a>
<a>
<h3>Some Text</h3>
</a>
</div>
<div class="bcd">
<a href="#">
<img class="img1" width="50" height="50"/>
</a>
<a>
<h3>Some Text</h3>
</a>
</div>
<div class="bcd">
<a href="#">
<img class="img1" width="50" height="50"/>
</a>
<a>
<h3>Some Text</h3>
</a>
</div>
<div class="bcd">
<a href="#">
<img class="img1" width="50" height="50"/>
</a>
<a>
<h3>Some Text</h3>
</a>
</div>
</div>
Comment puis-je rendre l'image sensible pour Mobile (360X640px) et iPad (768X1024px)? Pouvez-vous me donner le code CSS, s'il vous plaît?
Je dois donner deux images dans Mobile et quatre dans iPad en une seule ligne !!
Voici le code que vous devez suivre:
img {
max-width: 100%;
height: auto;
}
Supprimer les attributs width et height de la balise img et ajouter un fichier CSS pour cette image max-width:100%; width:100%;
ce paramètre définit l'image que vous souhaitez définir comme image d'arrière-plan dans un div et définissez la taille de l'arrière-plan comme couverture.
background-image: url('YOUR URL');
background-size: cover;
<style>
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, Ruby, section, summary,time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline;}/* HTML5 display-role reset for older browsers */article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block;}body { line-height: 1;}ol, ul { list-style: none;}blockquote, q { quotes: none;}blockquote:before, blockquote:after,q:before, q:after { content: ''; content: none;}table { border-collapse: collapse; border-spacing: 0;}
.container .bcd{float: left;position: relative;}
.container .bcd div{background-color: #fff;border: 1px solid #e4e4e4;border-radius: 5px;margin-top: 10px;min-height: 100px;}
.container .bcd div img{border-radius: 5px 5px 0 0;height: auto;width: 100%;}
.container .bcd div a.bottom{background: none repeat scroll 0 0 #fff;bottom: 4px;color: #000;font-size: 14px;padding: 9px 0 5px;position: relative;width: 100%;display: inline-block;}
.container .bcd div a.bottom h3{padding: 0 10px;}
@media (max-width: 700px) {
.bcd{width: 100%;}
.bcd div{margin: 0 10px}
}
@media (min-width: 700px) {
.bcd {width: 50%;}
.bcd:nth-child(odd) div {margin-left: 10px;margin-right: 5px;}
.bcd:nth-child(even) div {margin-left: 5px;margin-right: 10px;}
}
</style>
<div class="container">
<div class="bcd">
<div>
<a href="#">
<img class="img1" width="50" height="50"/>
</a>
<a class="bottom"><h3>Some Text</h3></a>
</div>
</div>
<div class="bcd">
<div>
<a href="#">
<img class="img1" width="50" height="50"/>
</a>
<a class="bottom"><h3>Some Text</h3></a>
</div>
</div>
<div class="bcd">
<div>
<a href="#">
<img class="img1" width="50" height="50"/>
</a>
<a class="bottom"><h3>Some Text</h3></a>
</div>
</div>
<div class="bcd">
<div>
<a href="#">
<img class="img1" width="50" height="50"/>
</a>
<a class="bottom"><h3>Some Text</h3></a>
</div>
</div>
<div class="bcd">
<div>
<a href="#">
<img class="img1" width="50" height="50"/>
</a>
<a class="bottom"><h3>Some Text</h3></a>
</div>
</div>
<div class="bcd">
<div>
<a href="#">
<img class="img1" width="50" height="50"/>
</a>
<a class="bottom"><h3>Some Text</h3></a>
</div>
</div>
<div class="bcd">
<div>
<a href="#">
<img class="img1" width="50" height="50"/>
</a>
<a class="bottom"><h3>Some Text</h3></a>
</div>
</div>
<div class="bcd">
<div>
<a href="#">
<img class="img1" width="50" height="50"/>
</a>
<a class="bottom"><h3>Some Text</h3></a>
</div>
</div>
<div style="clear: both;margin: 0px;padding: 0px;"></div>
</div>
En utilisant la requête multimédia, vous pouvez diviser les images à votre guise.
.abc{padding:0; margin:0; box-sizing:border-box; width:100%;}
.bcd{display:inline-block;width:24%;}
@media all and (max-width: 360px){
.bcd
{
display:inline-block;
width:49%;
}
}
régler la largeur et la hauteur en pourcentage
<img class="img1" width="100%" height="100%"/>
utiliser la requête multimédia
/ * Paysage * /
@media screen and (min-aspect-ratio: 1/1) {
//use your style for landscape
}
/ * Portrait (c.-à-d. Une fenêtre étroite) * /
@media screen and (max-aspect-ratio: 1/1) {
// your style for portrait
}
<style>
@media only screen and (max-width: 1024px) {
.abc .bcd{max-width:100%;height:auto;border:1px solid #ff0000;width:24%;display:inline-block;}
.abc .bcd a img{width:100%;height:auto;}
}
@media only screen and (max-width: 640px) {
.abc .bcd{max-width:100%;height:auto;border:1px solid #ff0000;width:48%;display:inline-block;}
.abc .bcd a img{width:100%;height:auto;}
}
</style>
Vous pouvez supprimer la bordure.
Si vous supprimez la bordure, vous pouvez utiliser une largeur de 25% pour 4 lignes sur une ligne et de 50% pour 2 lignes sur une ligne.
CSS:
img {
max-width: 100%;
max-height: 100%;
}
HTML:
<img class="img" src="image.png">