Bonjour,

J'ai un petit souci, malgré mes recherches je n'arrive pas à adapter une image selon certaines conditions, passant par un créateur de site en ligne.

Je passe obligatoirement par un "bloc" :
- Uniquement en htlm + css
- L'image est sous un lien "h­ttps://nomdelimage.jpg"
- L'image doit être responsive
- Pas de déformation
- Avoir un recadrage

Exactement comme ici http://www.photom.me/ par exemple.

Pour l'instant j'arrive uniquement à la rendre responsive...

html

<img src="h­ttps://nomdelimage.jpg">

css

div:hover {

}

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

    }

Mais l'image ne s'adapte pas à la résolution de l'écran, sur le haut et le bas, en recadrant, comme je le souhaiterais.
Elle s'adapte en adaptant sa taille...

Si vous avez des idées, merci bien.

C'est déjà le cas du site par lequel je passe "Smugmug", le fait de passer par un smartphone modifie complétement la mise en page, elle s'adapte pour être beaucoup plus fluide.
Mais.... comme je l'ai souligné les images s'adaptent en changeant de taille, hors en plus de cela je voudrais qu'elle recadre, qu'elle soit uniquement à la résolution de l'écran.
Exactement comme le lien fourni, la personne est hébergée également sous Smugmug c'est donc réalisable.

Après je n'ai peut être tout simplement pas compris ce que tu m'indiques, mais de là à prendre contact avec le support pour leur apprendre leur boulot.......... sachant que c'est immédiatement possible.

background-size: cover;

?

Hm non, je m'y prend surement mal. Je n'ai jamais appris à coder, c'est tout au pifomètre.
Si je met un "background" dans la feuille CSS il faut que je cale également un "background" dans la feuille Html non ?

Merci.

Je passe par un créateur de site pour pas m'embêter, et je cherche à le modifier, à le complémenter... quelle idée à la con.

Non alors, en fait tu t'y prends mal, tu devrais remplacer ton img par une div dans ton html.

Je t'ai fais un exemple
https://codepen.io/TerryChelios/pen/Ebdyza

Le 28 novembre 2017 à 19:27:10 Terryninja a écrit :
Non alors, en fait tu t'y prends mal, tu devrais remplacer ton img par une div dans ton html.

Je t'ai fais un exemple
https://codepen.io/TerryChelios/pen/Ebdyza

Erf, non mais presque.
L'image s'adapte mais pas le bloc, sur ton lien également.
L'image est fixe mais le bloc lui ne s'est pas adapté, il a gardé la même taille que l'image d'origine, du coup on a une scroll barre à faire défiler.

Ca me servira pour autre chose tiens.

Merci

Tu veux que l'image s'adapte en hauteur c'est ça ? Que ça fasse tout le temps la taille de l'écran ?

Oui,

Ha putain si je n'ai pas était clair dés le début, je suis vraiment désolé.

Il faut utiliser du javascript pour ça

On n'a pas accès au Java, et sur le lien fourni la personne a réussie à se démerder sans.
Je vais essayer de voir avec elle.

Merci beaucoup dans tout les cas.

Javascript, pas java, attention ahah.

Si sur le lien fourni il y a du javascript

Java ou javascript, dans tout les cas on y a pas accès.
Hmmm il a sans doute dû passer par une fonctionnalité propre au thème du site, ou un truc comme çà...

Bon bref merci beaucoup, j'aurai au moins appris des trucs. Java =/= Javascript

Oui je comprends pas bien le soft utilisé mais ça doit être inclus dans son thème tout simplement.

Bonne chance alors !

Pour qu'une image s'adapte en hauteur ou en largeur automatiquement, moi je fais comme ceci:
<img src="'image.jpg" style="max-width:300px; max-height:300px;">
Et puis c'est tout et ça marche très bien