Os usuários carregam fotos e o tamanho da foto é desconhecido; precisa ser ampliado em proporção. Como mostrado abaixo.
Dando uma olhada, você pode usar o text-align: Center; Na proporção, os atributos de largura e altura que usam predefinição <img /> não podem ser resolvidos. Porque as imagens do usuário podem ser muito longas ou muito amplas. Pensei no relacionamento deles online e julguei que é o seguinte:
se (largura real> visualizar a largura máxima) {
Largura de escala = visualização de largura máxima
}
if (altura real> Visualizar altura máxima) {
Altura de escala = visualizar altura máxima
}
No entanto, haverá problemas. Para permitir que ele seja proporcional, vários julgamentos precisam ser feitos. Em seguida, viola o princípio de nossa esperança de automação. Pense novamente, embora você não goste de matemática, mas a matemática ainda é muito útil, deve haver outras maneiras. Como é escalado em proporção, por que não usar a proporção de imagens reais e as larguras da área de visualização para calcular seu relacionamento? Hmmmm ... realmente ok. De fato, precisamos apenas aumentar o zoom em largura ou altura. Porque a proporção é apenas grande e pequena. Especificamente, escreva uma função para implementá -la:
Copie o código do código da seguinte forma:
/**
* A imagem é ampliada em proporção adaptativa
* @param img {element} fotos enviadas pelo usuário
* @param maxwidth {número} A largura máxima da área de visualização
* @param maxHeight {número} A altura máxima da área de visualização
*/
Var ressekimg = function (img, maxwidth, maxHeight) {
var w = img.width,
h = img.head;
// Quando a imagem não faz alterações além do horário da área de visualização
if (w <maxwidth && h <maxHeight) return;
// Quando a taxa de imagem real é maior que a proporção de largura e altura da área de visualização
// largura de imagem de escala, caso contrário, a largura da imagem em escala
w/h> maxwidth/maxHeight?