web-dev-qa-db-fra.com

Comment éviter que les images d'article soient étirées à 100%

Je demande à nouveau à ce sujet car la solution de article de joomla v3.6 - l’image téléchargée s’étire au maximum ne semble pas fonctionner pour moi.

Le problème que j'ai, c’est que les images des articles gardent leur taille lorsque je consulte le site Web sur mon smartphone, alors que sur mon écran, leur largeur s’étire complètement, ce qui entraîne la création d’énormes images dégradées dans mes articles.

Quelqu'un pourrait-il suggérer un correctif pour moi? J'ai passé des heures à cela mais je ne peux toujours pas le résoudre.

Merci beaucoup.

Image issue example

Les codes suivants (seuls ceux qui font référence à la balise img) ont été extraits du fichier template.CSS du dossier CSS du site Web Joomla.

.features-list .feature-row div:first-child.feature-img img {
  float: left;
}
.features-list .feature-row div:last-child.feature-img img {
  float: right;
}
article-intro img,
.article-content img {
  display: block;
  width: 100% \9;
  max-width: 100%;
  height: auto;
}
.article-intro img[align=left],
.article-content img[align=left],
.article-intro .img_caption.left,
.article-content .img_caption.left,
.article-intro .pull-left.item-image,
.article-content .pull-left.item-image {
  margin: 0 30px 20px 0;
}
.article-intro img[align=right],
.article-content img[align=right],
.article-intro .img_caption.right,
.article-content .img_caption.right,
.article-intro .pull-right.item-image,
.article-content .pull-right.item-image {
  margin: 0 0 20px 30px;
}
@media (max-width: 768px) {
  .article-content iframe {
    width: 100% !important;
    height: auto;
  }
}
.img-intro-none,
.img-intro-left,
.img-intro-right,
.img-fulltext-none,
.img-fulltext-left,
.img-fulltext-right,
.img_caption {
  position: relative;
}
.img-intro-none,
.img-intro-left,
.img-intro-right,
.img-fulltext-none,
.img-fulltext-left,
.img-fulltext-right,
.img_caption {
  margin-bottom: 20px;
  max-width: 100%;
}
.img-fulltext-left {
  float: left;
  margin-right: 20px;
}
.img-fulltext-right {
  float: right;
  margin-left: 20px;
}
.img-intro-none img,
.img-intro-left img,
.img-intro-right img,
.img-fulltext-none img,
.img-fulltext-left img,
.img-fulltext-right img {
  margin: 0;
}
.img_caption img {
  margin-bottom: 1px !important;
}
.img_caption p.img_caption {
  background: #eeeeee;
  color: #555555;
  font-size: 12px;
  width: 100%;
  margin: 0;
  padding: 5px;
  text-align: center;
  clear: both;
}
@media screen and (max-width: 767px) {
  article img[align=left],
  .img_caption.left,
  article img[align=right],
  .img_caption.right,
  .img-fulltext-left,
  .img-fulltext-right {
    float: none !important;
    margin-left: 0;
    margin-right: 0;
    width: 100% !important;
  }
}
joomla-3.xarticlesimages
1
Will Kim

Normalement, vous ne trouverez pas de bonnes réponses spécifiques au modèle que vous utilisez. Tous les modèles sont différents.

J'ai visité votre page et, dans votre cas, vous l'avez dans votre modèle CSS (ligne 3891 de http://elitemaths.com.au/templates/elitemaths/local/css/themes/elitemaths/template.css =): .article-intro img, .article-contenu img, .article-image-full img {largeur: 100%; }

Changez la partie 100% en initiale et cela devrait le faire pour vous. .

3
Insider Pro