Rendre responsive l'image d'une catégorie

[siriek]

Bonjour a tous, tout est dans le titre. Comment rendre responsive l'image d'une catégorie? J'ai cherché sous firebug le css de l'image pour lui coller un truc du genre

img{
max-width:100%;
height:auto;
}

 

mais je ne trouve pas. Quelqu'un aurait une piste?

 

Merci d'avance

[Ariane Web et Plus]

Bonjour,

 

De base l'image de catégorie est responsive, et elle disparait sur petit écran.

Pouvez vous nous donner une url pour qu'on puisse regarder.

 

Bonne journée

[siriek]

Bonjour, lien envoyé par MP

[Ariane Web et Plus]

Bonjour,

 

Déjà mettre du CSS dans le fichier smarty est une mauvaise pratique, vous devriez utilisez le selecteur .content_scene_cat et faire vos modifications dans le CSS.

Mettez 100% à la place de cover et règlez la hauteur en fonction des écrans.

 

Bonne journée

[siriek]

Merci pour l'info, je regarde de plus prêt...

 

Bonne journée.

 

** edit :

Bien une info m'échappe, on parle bien du fichier "category.css" du theme?

 

J'ai bien des .content_scene_cat mais aucun avec "cover" ou alors j'ai pas bien compris de quoi on parle...

 

voila le truc :

 

/* ************************************************************************************************

Categories Page Styles

************************************************************************************************ */

.content_scene_cat {

border-top: 5px solid #585858;

color: #a6a6a6; /*texte de présentation de la catégorie*/

line-height: 19px;

margin: 0 0 26px 0;}

.content_scene_cat .content_scene_cat_bg {

padding: 18px 10px 10px 42px;

background-color: #232323 !important; }

@media (max-width: 1199px) {

.content_scene_cat .content_scene_cat_bg {

padding: 10px 10px 10px 15px; } }

.content_scene_cat span.category-name {

font: 600 35px/51px "Open Sans", sans-serif;

color: #cccccc; /*texte du titre de la catégorie*/

margin-bottom: 12px; }

@media (max-width: 1199px) {

.content_scene_cat span.category-name {

font-size: 25px;

line-height: 30px; } }

.content_scene_cat p {

margin-bottom: 0; }

.content_scene_cat a {

color: white; }

.content_scene_cat a:hover {

text-decoration: underline; }

.content_scene_cat .content_scene {

color: #777777; }

.content_scene_cat .content_scene .cat_desc {

padding-top: 20px; }

.content_scene_cat .content_scene .cat_desc a {

color: #777777; }

.content_scene_cat .content_scene .cat_desc a:hover {

color: #515151; }

 

La je sèche...

 

merci d'avance

Edited February 10, 2017 by siriek (see edit history)

[Ariane Web et Plus]

Bonjour,

 

Justement j'ai l'impression que le cover est dans le fichier tpl alors qu'il devrait être dans le fichier css

[siriek]

Bonjour à tous, j'ai suivi les conseils d'Ariane Web, j'ai supprimé le code CSS du fichier TPL et ajouté ces lignes dans le CSS en modifiant le cover par 100%. Ca marche nickel. Par contre je sèche pour règler la hauteur en fonction des écrans. Du coup, la taille du FOND de l'image reste à 300px de HAUTEUR, quelque soit la taille de l'écran, par contre, la largeur elle ce modifie nickel, l'image quand à elle, ce modifie proportionnellement et impeccablement aussi par rapport à la taille d'écran. Dans le TPL il y a cette ligne : "min-height:{$categorySize.height}px;" Je pense qu'il va falloir la modifier et l'a transférer aussi dans le fichier CSS. J'ai cherché par quoi remplacer "{$categorySize.height}px" j'ai essayé "auto" "100%" etc mais rien ni fait, la hauteur devient mini et l'image est tronqué... D'autre par, ce code dans le TPL est d'origine dans le thème boostrap de prestashop, je viens de regarder dans le thème de la version 1.6.1.11 et idem...
 
" <!-- Category image -->
<div class="content_scene_cat_bg"{if $category->id_image} style="background:url({$link->getCatImageLink($category->link_rewrite, $category->id_image, 'category_default')|escape:'html':'UTF-8'}) right center no-repeat; background-size:cover; min-height:{$categorySize.height}px;"{/if}>"

 

Merci pour vos pistes...