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

мне нужно сделать это изображение растягивается до максимального размера возможно без переполнения это <div> или искажения изображения.



Я не могу предсказать соотношение сторон изображения, поэтому нет никакого способа узнать, следует ли использовать:



<img src="url" style="width: 100%;">


или



<img src="url" style="height: 100%;">


Я не могу использовать оба (т. е. style= " width: 100%; height: 100%;"), потому что это растянет изображение, чтобы соответствовать <div>.



The <div> имеет размер установленный процентом экрана, который тоже непредсказуемо.

589   15  

15 ответов:

обновление 2016:

современный браузер ведет себя гораздо лучше. Все, что вам нужно сделать, это установить ширину изображения на 100% (демо)

.container img {
   width: 100%;
}

так как вы не знаете соотношение сторон, вам придется использовать некоторые сценарии. Вот как я бы сделал это с помощью jQuery (демо):

CSS

.container {
    width: 40%;
    height: 40%;
    background: #444;
    margin: 0 auto;
}
.container img.wide {
    max-width: 100%;
    max-height: 100%;
    height: auto;
}
.container img.tall {
    max-height: 100%;
    max-width: 100%;
    width: auto;
}​

HTML

<div class="container">
 <img src="http://i48.tinypic.com/wrltuc.jpg" />
</div>
<br />
<br />
<div class="container">
 <img src="http://i47.tinypic.com/i1bek8.jpg" />
</div>

скрипт

$(window).load(function(){
 $('.container').find('img').each(function(){
  var imgClass = (this.width/this.height > 1) ? 'wide' : 'tall';
  $(this).addClass(imgClass);
 })
})
159  
2016-07-23 00:47:08

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

#myImage {
    zoom: 2;  //increase if you have very small images

    display: block;
    margin: auto;

    height: auto;
    max-height: 100%;

    width: auto;
    max-width: 100%;
}
66  
2012-10-27 01:10:41

есть гораздо более простой способ сделать это, используя только CSS и HTML:

HTML:

<div class="fill"></div>

CSS:

.fill {
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-image: url('path/to/image.jpg');
}

Это поместит ваше изображение в качестве фона, и растянуть его, чтобы соответствовать div размер без искажений.

57  
2016-07-01 18:36:27

если вы можете, использовать фоновые изображения и установить background-size: cover. Это позволит сделать фон охватывает весь элемент.

CSS

div {
  background-image: url(path/to/your/image.png);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
}

если вы застряли с помощью встроенных изображений есть несколько вариантов. Во-первых, есть

object-fit

это свойство действует на изображения, видео и другие объекты, подобные background-size: cover.

CSS

img {
  object-fit: cover;
}

к сожалению, поддержка браузеров не это великий с IE до версии 11 не поддерживает его вообще. Следующая опция использует jQuery

CSS + jQuery

HTML

<div>
  <img src="image.png" class="cover-image">
</div>

CSS

div {
  height: 8em;
  width: 15em;
}

Custom плагин jQuery

(function ($) {
  $.fn.coverImage = function(contain) {
    this.each(function() {
      var $this = $(this),
        src = $this.get(0).src,
        $wrapper = $this.parent();

      if (contain) {
        $wrapper.css({
          'background': 'url(' + src + ') 50% 50%/contain no-repeat'
        });
      } else {
        $wrapper.css({
          'background': 'url(' + src + ') 50% 50%/cover no-repeat'
        });
      }

      $this.remove();
    });

    return this;
  };
})(jQuery);

используйте плагин, как это

jQuery('.cover-image').coverImage();

он возьмет изображение, установит его в качестве фонового изображения на элементе оболочки изображения и удалит img теги из документа. Наконец, вы можете использовать

чистый CSS

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

CSS

div {
  height: 8em;
  width: 15em;
  overflow: hidden;
}

div img {
  min-height: 100%;
  min-width: 100%;
  width: auto;
  height: auto;
  max-width: none;
  max-height: none;
  display: block;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

надеюсь, что это может помочь кому-то, удачи в кодировании!

23  
2015-11-12 10:14:45

благодаря CSS3

img
{
   object-fit: contain;
}

https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

IE и EDGE как всегда аутсайдеры: http://caniuse.com/#feat=object-fit

9  
2016-04-18 15:15:59

это невозможно только с HTML и CSS, или, по крайней мере, дико экзотические и сложные. Если вы хотите добавить javascript, вот решение с помощью jQuery:

$(function() {
    $(window).resize(function() {
        var $i = $('img#image_to_resize');
        var $c = $img.parent();
        var i_ar = $i.width() / $i.height(), c_ar = $c.width() / $c.height();            
        $i.width(i_ar > c_ar ? $c.width() : $c.height() * (i_ar));
    });
    $(window).resize();
});

это изменит размер изображения, чтобы оно всегда помещалось внутри родительского элемента, независимо от его размера. И как он привязан к $(window).resize() событие, когда пользователь изменяет размер окна, изображение будет корректироваться.

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

5  
2009-12-12 03:55:12

установить ширину и высоту наружный container div. Затем используйте ниже стиль на img:

.container img{
    width:100%;
    height:auto;
    max-height:100%;
}

Это поможет вам сохранить соотношение сторон вашего img

5  
2014-03-27 21:01:01

я наткнулся на этот вопрос ищут двойники проблема. Я делаю веб-страницу с адаптивным дизайном, а ширина элементов, размещенных на странице, устанавливается в процентах от ширины экрана. Высота устанавливается со значением vw.

Так как я добавляю сообщения с PHP и бэкендом базы данных, о чистом CSS не могло быть и речи. Однако я нашел решение jQuery/javascript немного троблевым, поэтому я придумал аккуратное (так что я думаю, по крайней мере) решение.

HTML (или php)

div.imgfill {
  float: left;
  position: relative;
  background-repeat: no-repeat;
  background-position: 50%  50%;
  background-size: cover;
  width: 33.333%;
  height: 18vw;
  border: 1px solid black; /*frame of the image*/
  margin: -1px;
}
<div class="imgfill" style="background-image:url(source/image.jpg);">
  This might be some info
</div>
<div class="imgfill" style="background-image:url(source/image2.jpg);">
  This might be some info
</div>
<div class="imgfill" style="background-image:url(source/image3.jpg);">
  This might be some info
</div>

С помощью style="" возможно, что PHP обновит мою страницу динамически, а CSS-стиль вместе со style= "" будет в конечном итоге идеально покрытым изображением, масштабированным для покрытия динамического div-тега.

4  
2016-04-26 14:17:23

С помощью этого метода вы можете заполнить ваш div с изображением меняющегося соотношения дивов и изображений.

jQuery:

$(window).load(function(){
   $('body').find(.fillme).each(function(){
      var fillmeval = $(this).width()/$(this).height();
      var imgval = $this.children('img').width()/$this.children('img').height();
      var imgClass;
      if(imgval > fillmeval){
          imgClass = "stretchy";
      }else{
          imgClass = "stretchx";
      }
      $(this).children('img').addClass(imgClass);
   });
});

HTML:

<div class="fillme">
   <img src="../images/myimg.jpg" />
</div>

CSS:

.fillme{
  overflow:hidden;
}
.fillme img.stretchx{
  height:auto;
  width:100%;
}
.fillme img.stretchy{
  height:100%;
  width:auto;
}
3  
2013-01-20 08:03:25

Это сделал трюк для меня

div img {
    width: 100%;
    min-height: 500px;
    width: 100vw;
    height: 100vh;
    object-fit: cover;
}
3  
2016-11-18 18:37:15

можно использовать object-fit: cover; на родительском div.

https://css-tricks.com/almanac/properties/o/object-fit/

3  
2017-08-18 13:17:34

Если вы работаете с тегом IMG, это легко.

Я сделал так:

<style>
        #pic{
            height: 400px;
            width: 400px;
        }
        #pic img{
            height: 225px;               
            position: relative;
            margin: 0 auto;
        }
</style>

<div id="pic"><img src="images/menu.png"></div>

$(document).ready(function(){
            $('#pic img').attr({ 'style':'height:25%; display:none; left:100px; top:100px;' })
)}

но я не нашел, как заставить его работать с #pic { background:url(img/menu.формат PNG)} Enyone? Спасибо

2  
2013-03-25 19:01:04

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

применить...

img {
  object-fit: cover;
  height: -webkit-fill-available;
}

стили изображения.

2  
2017-12-12 19:52:26

HTML:

<style>
#foo, #bar{
    width: 50px; /* use any width or height */
    height: 50px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}
</style>

<div id="foo" style="background-image: url('path/to/image1.png');">
<div id="bar" style="background-image: url('path/to/image2.png');">

JSFiddle

...И если вы хотите установить или изменить изображение (используя #foo в качестве примера):

jQuery:

$("#foo").css("background-image", "url('path/to/image.png')");

JavaScript:

document.getElementById("foo").style.backgroundImage = "url('path/to/image.png')";
1  
2016-06-30 02:07:36

Если вы хотите установить максимальную ширину или высоту (чтобы она не была очень большой), сохраняя соотношение сторон изображений, вы можете сделать это:

img{
   object-fit: contain;
   max-height: 70px;
}
1  
2018-06-02 14:00:02

Comments

    Ничего не найдено.
Click here to cancel reply.