7
votes

Image à être max-largeur: 100%, hauteur: auto mais hauteur pas moins de xx sans augmenter

Il y a une image à l'intérieur d'un conteneur. L'image prend 100% de sa largeur et de sa hauteur est automatique. Mais je veux définir la hauteur pour être au moins des pixels XXX, alors lorsque je redimensionnez la largeur du conteneur, quelle que soit l'image reste au moins une augmentation de la hauteur et de la largeur afin de conserver des proportions. Le problème avec mon approche actuelle ci-dessous est que les dimensions d'image sont asyvées une fois que le conteneur est redimensionné.

<div class="imageHelper">
    <img src="http://farm8.staticflickr.com/7230/7218149614_e0ba252f73_b.jpg" alt="image" />
</div>

.imageHelper {
    position: relative;
    width: 100%;
    height: 600px;
    overflow: hidden;
}

.imageHelper img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    max-width: 100%;
    width:auto\9;
    height: auto;
    min-height: 600px;
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

html css image

2 commentaires

Ce serait bien si CSS avait une "proportion: une chose fixe". Il serait utile pour les iframes et les trucs.

Vous ne pouvez pas avoir une largeur maximale et une hauteur min et maintenez le rapport de l'aspect. Ce sont des exigences contradictoires. Si vous réduisez la fenêtre, il est donc large de 50 pixels, alors l'image doit être au plus 50px de large pour satisfaire les propres de la largeur maximale et être d'au moins 600 px de hauteur pour répondre à la condition de hauteur minimale. Ce sera étiré.

3 Réponses :

10
votes

Cet article pourrait aider en général:

http : //www.creativebloq.com/css3/control-image-aspect-ratios-csss3-2122968 p>

et cette partie en particulier: P>

object-fit: cover;
overflow: hidden;

1 commentaires

Je ne connaissais pas la propriété CSS. La compatibilité à ce sujet est pratiquement inexistante, cependant: Caniuse.com/Object-fit

3
votes

Est-ce ce que vous êtes après? xxx

Voir exemple ici

Vous pouvez changer la hauteur et la largeur du conteneur .. Et l'image restera toujours proportionnelle.

0 commentaires

1
votes

Vous pouvez essayer de relâcher sur la hauteur de ligne code> et text-align code> pour centrer votre image. Ensuite, en utilisant la marge négative, vous pouvez réduire virtuellement la taille de l'image, au moins d'espace dont les besoins de l'image.

Si vous voulez que l'image soit largeur: 100% et min-hauteur: 600px, ce n'est pas cohérent et vous devez couper quelque chose de sorte qu'il conserve son rapport mais avec certaines parties cachées. Sous-caché ou horizontal. p>

Ceci dans le cas, votre image fait partie de votre contenu, sinon, s'il ne s'agit que de la décoration forte>, a arrière-plan-image code> -position code> & -Size code> devrait faire. Exemple avec couper une image unique dans le flux de son centre: http://codepen.io/gc- NOMADE / FULL / FDIXE P>

.imageHelper {
  height: 600px;
  line-height: 600px;/*set baseline right in vertical middle */
  overflow: hidden;
  text-align:center;/* center image or texte */
}
.imageHelper img {
  margin: -100%;/* reduce virtually to 0 space used by image so it follows from center,  line-height and text-align set in parent  :) */
  vertical-align:middle;/* stands on baseline */
/* keep both height/width flexible */
  min-height:600px;
  min-width:100%;
}

0 commentaires