1485 sujets

Web Mobile et responsive web design

Image width in css

Bonjour

Est il possible sans utiliser un balisage HTML <img> de definir en css une image dont la valeur width s'adapte a celle de la colonne ? . Je souhaite que l image complète soit visible dans la colonne en se basant sur le width de la colonne .

Dans ce cas , les moteurs de recherche peuvent ils indexer cette image définie dans le fichier css ? Il y a til possiblité d'ajouter l'équivalent d' un alt dans le fichier css ?

merci
upload/48731-alsaimagew.png
Modifié par 75lionel (18 Sep 2014 - 16:03)
Modérateur
75lionel a écrit :
Bonjour

Est il possible sans utiliser un balisage HTML &lt;img&gt; de definir en css une image dont la valeur width s'adapte a celle de la colonne ? . Je souhaite que l image complète soit visible dans la colonne en se basant sur le width de la colonne .

Dans ce cas , les moteurs de recherche peuvent ils indexer cette image définie dans le fichier css ? Il y a til possiblité d'ajouter l'équivalent d' un alt dans le fichier css ?

merci
upload/48731-alsaimagew.png



Salut,


<!doctype html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div{width: 700px;margin: 0 auto;}
        div img{display: block;width: 100%;}
        
        
    </style>
</head>
<body>
    <div>
        <img src="http://placehold.it/350x150" alt="une image référençable">
    </div>
</body>
</html>
bonjour
Merci pour votre réponse mais je ne souhaite pas utiliser la balise HTML <img> ( voir capture d'écran) mais la propriété "background" ( ou une autre si possible) .

Cordialement
Administrateur
Bonjour,

background-size: 100% auto;

ou
background-size: cover;

par exemple Smiley smile
Modifié par Raphael (18 Sep 2014 - 17:54)
Modérateur
oups, j'ai mal lu le sujet. Désolé. :$


Par contre, l'image en background ne sera pas référençable. Pas d'attribtu alt. Smiley decu

À noter qu'une image en background ne doit pas avoir de réel signification avec le contenu proposé.


@Raphael : +1 (pour le CSS)
Modifié par niuxe (18 Sep 2014 - 18:29)
Bonjour
j' avais déja pensé a auto et 100% car c'est la base du responsive mais cela n'avait pas fonctionné . Je pense que les propriétés ajoutées ( manquantes) dans le sélecteur peuvent invalidés d'autre propriétés présent aussi dans le même sélecteurs . Enfin ...je me demande comment les navigateurs interprètent un shortland background pour lequel il manque des arguments définis dans le même sélecteur explicitement .
Une boite ( css box) enfant qui se base sur une boite parent dynamique ( %) peut il fonctionner ?
Sinon je vais réessayer ..... Merci
Modifié par 75lionel (18 Sep 2014 - 22:01)
Bon , cela ne fonctionne pas . Comme chaque contexte est particulier
la hiearchie HTML avec le nom des id class avec formatage emmet
/html>body>div.page>div.page_content>div.page_content_container_right>div.content_sidebar>figure>div.figure_photo

Le code actuel fait que en réduisant le width du navigateur ; le coté droit de l image reste collé a droite de la colonne ( visible) et la partie gauche de image disparait
.content_sidebar figure { display: block; margin: 0px; padding: 0px; }
.content_sidebar figure .figure_photo {
background: url(../images/sidebar_photo_large.jpg) right 0px;
margin: 0px;
height: 175px;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px; }

bande mediaquery 150 500 px
.page .page_content .content_sidebar figure .figure_photo { background: url(../images/sidebar_photo_small.jpg) right 0px; height: 100px; }



il doit y avoir un problème de position et de display: block ; ....à étudier / vérifier ....?!!

cordialement
Modifié par 75lionel (18 Sep 2014 - 22:28)
Sujet clos
Aller à