images dans les pages web asp.net C#

Question

Objectif: Pour redimensionner les images basées sur la résolution

Problème: Si nous ne redimensionne pas, la structuration d'alignement et de l'image sera parti

Besoin du code suivant: Je ne veux pas redimensionner une petite image à 100% de largeur.

System.Drawing.Image img = System.Drawing.Image.FromFile(imgTest.Src); 
    if (img.HorizontalResolution > 1000) 
    { 
     imgTest.Attributes.Add("width", "100%"); 
    } 

Est-ce que je suis dans le droit chemin? Ou existe-t-il d'autres alternatives pour faire de même? Faites-moi savoir, puis-je remplacer le code C# en utilisant n'importe quel CSS?

Answer 1

Pouvez-vous être plus précis?

Fondamentalement, vous stockez l'image quelque part dans la nouvelle taille?

Ou souhaitez-vous simplement montrer l'image dans un DIV ou td qui doit être d'une certaine largeur/hauteur?

Et si je vous comprends bien, vous êtes à la recherche de redimensionner des images plus grandes, donc tout dessous d'un seuil ne devrait pas obtenir redimensionnée, non?

S'il est simple pour l'affichage, vous pouvez fossé tout cela et il suffit d'utiliser CSS

img 
{ 
    max-width:1000px; 
    max-height:1000px; 
} 

Cela fera une image qui dépasse l'une de ces contraintes plus petites mais avec un rapport d'aspect fixe.

Ce lien explique les bases de ces propriétés CSS http://www.w3schools.com/cssref/pr_dim_max-height.asp

Laissez-moi savoir si cela a été utile! À votre santé!

Answer 2

Vous pouvez utiliser des requêtes de média CSS pour ce faire. CAVEAT: il existe une tendance actuelle parmi les concepteurs de sites Web à utiliser des techniques dites de «conception de sites web réactives» pour atteindre cet objectif pour les appareils mobiles; mon conseil: ne suivez pas cette mode. Les requêtes médias ne sont activées qu'après le balisage et le téléchargement des images. Donc, si vous vouliez appliquer des images plus petites pour les appareils mobiles, toutes les versions de bureau seraient encore téléchargées causant un problème de performance important.

Si vous essayez de le faire pour les appareils mobiles, créer site distinct pour mobile et appliquer les requêtes de médias CSS à cela. Utilisez Mobi pour détecter les fonctionnalités du navigateur.

Si c'est juste un site régulier du navigateur de bureau, CSS médias Les requêtes sont la voie à suivre.

http://www.w3.org/TR/css3-mediaqueries/

L'avantage d'utiliser cette méthode sur réglage de la largeur et la hauteur maximum est que vous préservez la qualité de l'image. Pour ce faire, des versions plus petites sont disponibles pour la requête multimédia.