Возможно определять установленный размер изображения без того, чтобы он был деформирован?

Я работаю с bootstrap, и на веб-странице я показываю изображения, оказывается, что для того, чтобы было видно хорошо изображение, если, должно быть 630 x 380.

<img alt="" src="<%=ResolveUrl("~/img/blog/blog_2.png")%>" />

но если я ввожу другое изображение в компьютер с различными размерами, останься очень непропорциональным с оставшейся частью Веб контента (ценные бумаги более наверху или внизу, описание дай - posicionada, и т.д.). Но если я размещаю установленные размеры:

<img alt="" src="<%=ResolveUrl("~/img/blog/blog_2.png")%>" height="380" width="630" />

Не desproporciona Веб контент, но если фотография остается плохо, например, а именно, размера уже я упомянул о них; изображение человека, что толще или тоньше.

Мне хотелось бы знать, существовало ли что-то, что могло бы упорядочивать это, как например, что отрезал какую-то часть изображения, чтобы показывать правильной формы с размером, желаемый, или если существует другое решение.

2
задан 19.02.2016, 06:20
7 ответов

Нет совершенных решений, кто-то будет должен уступать.

У Bootstrap есть выбор .img-responsive но он будет способствовать тому, чтобы изображение расширилось во всю ширину, и увеличит контейнер вертикально, что возможно сломало текст и остальные.

Простой способ способствовать тому, чтобы изображение всегда покрыло совсем площадь, - используя background-size: cover.

Для этого ты не должен использовать одну <img> а один <div>, и устанавливая эти свойства (ты можешь делать это из-за css или признак style)

Идеальное состоит в том, чтобы ты это сделал на <div> контейнер ej:

/* esta es la parte que genera adaptación */
.fondo {
  background: url(http://lorempixel.com/630/380/) no-repeat center center;
  background-size: cover;
}

/* el resto es para demostrarlo */
.igual-relacion {
  width: 630px;
  height: 380px;
}

.aplanado {
  width: 630px;
  height: 180px;
}

.alargado {
  width: 200px;
  height: 500px;
}

h1, p { 
  color: white;
}
<div class="fondo igual-relacion">
  <h1>Igual Relacion de Aspecto</h1>
  <p>Texto interno</p>
</div>
<div class="fondo aplanado">
  <h1>Se adapta aunque este aplanado</h1>
  <p>Pero se recortan partes de las imagenes</p>
</div>
<div class="fondo alargado">
  <h1>La imagen original es menos alta</h1>
  <p>Pero se se adapta bien, auque pierde algo de calidad, te combiene usar imagenes mas grandes que el contenedor.</p>
</div>

Эта техника оставляет в руках browser настройку изображения, он будет способствовать тому, чтобы он покрыл все деление, не будучи превзойден и ища лучший способ взбираться на это (костлявая в ширину или в высокое) но изображение деформированный край.

Как я сказал, что раньше кто-то должен уступать, с этим ты должен противостоять тому, что, если связь аспекта отличается, части изображения не будут видимыми, что неизбежное.

4
ответ дан 24.11.2019, 14:52

если ты нуждаешься в том, чтобы ввести изображение в HTML, простое решение состоит в том, чтобы создавать контейнер для твоего изображения и манипулировать размерами из-за CSS.

Я оставляю тебе пример с двумя изображениями различного размера:

  • Вертикальная одна из 450 × 600 (px)
  • Горизонтальная другая из 1247 x 929 (px)

Я надеюсь, что он помогает тебе.

.img-container{
  width:630px;
  height:380px;
  overflow:hidden;
}
.img-container img{
  width:100%;
  height:auto
}
<div class="img-container">
  <img src="http://joportal.hu/images/news/3fc2302101eccde9b8f57cb13b79e65df0ffcd15.jpg">
</div>
<div class="img-container">
  <img src="http://www.charliechaplin.com/images/film/poster/0000/0002/big_gold_rush_dance_of_the_rolls.jpg">
</div>
1
ответ дан 24.11.2019, 14:52

bootstrap он даже не разрабатывает, если ты хочешь изображение одного tamaГ±o специфическое средство поддерживая пропорции и не изображение внутри div, всегда ты можешь создавать CANVAS с изображением, который ты хотел бы в центре. AquГ - я оставляю тебе две функции примера, сделал ее rapidito asГ - у которого могут быть неудачи... одна, не используя CSS и другой с CSS.

    function img2ratio (img,color){
    /*  *****************************************************************
        * img2ratio: Mantiene el ratio de un objeto imagen              *
        *                                                               *
        * Uso: img2ratio (objeto imagen (,color de fondo) );            *
        *   Objeto imagen: objeto <IMG> (usa su src, width y height)    *
        *   Color de fondo: (opcional) color de las "bandas"            *
        * Reemplaza el <IMG> por un <CANVAS>                            *
        * Ejemplo: img2ratio(document.getElementById('foto'),"black");  *
        *****************************************************************   */

    if (!img.complete) {    // Por si no ha terminado de cargar la foto...
        window.setTimeout(function(){img2ratio(img,color);}, 100);
        return;
    }
    var x=img.width;
    var y=img.height;
    var canvas=document.createElement("canvas");
    canvas.height=y;
    canvas.width=x;
    var cnv=canvas.getContext('2d');
    if (color){
        cnv.fillStyle = color;
        cnv.fillRect(0,0,x,y);
    }
    var ratio=img.naturalHeight/img.naturalWidth;
    if (y>x*ratio) cnv.drawImage(img,0,y/2-x*ratio/2,x,x*ratio);
    else cnv.drawImage(img,x/2-y/ratio/2,0,y/ratio,y);
    img.parentNode.replaceChild(canvas,img);
}

function img2ratioCSS (img,color){
    /*  *****************************************************************
        * img2ratio: Mantiene el ratio de un objeto imagen              *
        *                                                               *
        * Uso: img2ratio (objeto imagen (,color de fondo) );            *
        *   Objeto imagen: objeto <IMG> (usa su src, width y height)    *
        *   Color de fondo: (opcional) color de las "bandas"            *
        * Reemplaza el <IMG> por un <CANVAS>                            *
        * Ejemplo: img2ratio(document.getElementById('foto'),"black");  *
        *****************************************************************   */

    if (!img.complete) {    // Por si no ha terminado de cargar la foto...
        window.setTimeout(function(){img2ratio(img,color);}, 100);
        return;
    }
    var x=img.width;
    var y=img.height;
    var obj=document.createElement("canvas");
    if (color) obj.style.backgroundColor=color;
    obj.style.backgroundSize="contain";
    obj.style.backgroundRepeat="no-repeat";
    obj.style.backgroundPosition="center center";
    obj.style.backgroundImage="url('"+img.src+"')";
    obj.height=y;
    obj.width=x;
    img.parentNode.replaceChild(obj,img);
}
1
ответ дан 24.11.2019, 14:52

или ты включаешь каждый imágen <img alt="" src="<%=ResolveUrl("~/img/blog/blog_2.png")%>" style="max-width: 100%;height: auto;display:block;" /> или просто ты добавляешь ко всем, что твой он приклеивает этикетку на класс .img-responsive <img alt="" src="<%=ResolveUrl("~/img/blog/blog_2.png")%>" class="img-responsive" /> так как ты используешь bootstrap.

Для вырезаний ты имеешь .img-rounded, .img-circle, .img-thumbnail. Здесь пример: http://v4-alpha.getbootstrap.com/content/images/

0
ответ дан 24.11.2019, 14:52

Ответ rnrneverdies мне кажется самым подходящим, только было бы нужно подчеркивать что самое рекомендуемое состоит в том, чтобы использовать изображения равного или мало размера, превосходящего место, где имеется намерение представлять.

Если твое место - 630 шириной x 380 высотой, у тебя есть следующие выборы:

  • Подавать изображение этих же самых средств и пропорций (ésto был бы идеальным случаем)
  • Подавать изображение, где минимумом ширины были 630 или минимум высоты, будьте 380 и используя background-size взбираться на изображение для того, чтобы он приспособился (contain) или на него взобрались (cover) пропорциональным способом.

Если подаются изображения более маленькие, чем площадь, в момент которой браузер взбирается на них, возможно, что они становятся мутными или pixeleadas.

Если подадутся изображения гораздо большие, чем площадь, время разряда увеличится, так как пользователь будет загружать файл большого изображения необходимого.

0
ответ дан 24.11.2019, 14:52

Ты можешь использовать свойства CSS, чтобы взбираться на изображение свойства backbround-size : cover

, Но помни, что, если ты используешь bootstrap , есть класс, как это упоминают другие названная о

img-responsive.

типов привета.

0
ответ дан 24.11.2019, 14:52

Я в ситуации показанные тем, что я делаю, он состоит в том, чтобы бросать algГєn редактор изображений, как gimp, чтобы взбираться tamaГ±o изображения на желанного сохраняя ее relaciГіn высоты и ширины.

-1
ответ дан 24.11.2019, 14:52

Теги

Похожие вопросы