Super_Saimon

масштабирование изображения в блоке

Recommended Posts

Добрый день!С наступившим и наступающими!))) Нуждаюсь в ответе на такой размытый, может быть, вопрос: как отмасштабировать изображение по размеру родительсокго блока? К примеру:  есть картинка 300Х300, а блок всего 140Х140. Задав ширину и высоту блоку 140Х140, а ищображению display: block, max -width,  -height: 100%, у меня изображение просто обрезается, а не масштабируется. Хотя, в примере, который сейчас разбираю как раз именно эффект уменьшения масштаба происходит-картинка вся влазит в родительский блок и уменьшает изображение.

Share this post


Link to post
Share on other sites
50 минут назад, andrey7287 сказал:

img {
	max-width: 100%;
}

 

 

Я писал что я ставлю max-width: 100%; изображению, но не получаю нужного результата.

Share this post


Link to post
Share on other sites
23 часа назад, Super_Saimon сказал:

Добрый день!С наступившим и наступающими!))) Нуждаюсь в ответе на такой размытый, может быть, вопрос: как отмасштабировать изображение по размеру родительсокго блока? К примеру:  есть картинка 300Х300, а блок всего 140Х140. Задав ширину и высоту блоку 140Х140, а ищображению display: block, max -width,  -height: 100%, у меня изображение просто обрезается, а не масштабируется. Хотя, в примере, который сейчас разбираю как раз именно эффект уменьшения масштаба происходит-картинка вся влазит в родительский блок и уменьшает изображение.

Если вы хотите растянуть изображение на ширину всего блока, при этом, изображение, не совсем подходит по масштабам к блоку, то max -width -height одновременно вам не подойдут, потому что первое, будет противоречить второму, выставляя максимальную ширину, попытка увеличит высоту приводит к увеличении ширины(масштабированию), но она уже задана максимальная, как следствие, ничего не произойдет, и картинка останется обрезанной.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By marizza40
      Добрый день! Жаль что у вас тут темы не удаляются, потому что когда писала, нашла у себя ошибку, а сейчас тему удалить не могу. Но сейчас не об этом. 
      Есть не анимированный слайдер
      <div class="slider"> <div class="slider_site"> <img src="/images/slider_1.jpg" alt="DSC0604-min.jpg" border="0" class="img_slider"/> </div> <div class="slider_line"> </div> <div class="txt_left"> <h1 class="slider_h">АВТОМАТИЗАЦИЯ<br> КНС</h1> <div class="button"> <a href="#" class="button_a">Подробнее</a> </div><!--/.button--> </div> <div class="slider_site"> <img src="/images/slider_2.jpg" alt="DSC0604-min.jpg" border="0" class="img_slider"/> </div> <div class="slider_line_two"> </div> <div class="txt_left"> <h1 class="slider_h_two">НАСОСНЫЕ СТАНЦИИ</h1> <div class="button"> <a href="#" class="button_a_one">Подробнее</a> </div><!--/.button--> </div> </div> Весь текст идет поверх картинки. На компьютере смотрится хорошо, но при уменьшении экрана браузера все начинает плыть. Как грамотно настроить, чтобы текст и кнопка при уменьшении экрана не выглядели коряво? 
      CSS:
      /*slider*/ .slider{ display: flex; font-family: 'Roboto', sans-serif; } .slider_h{ position: absolute; color: #fff; top: 32%; left: 7%; font-size: 86px; line-height: 85px; text-align: right; } .slider_h_two{ position: absolute; color: #fff; top: 32%; left: 52%; font-size: 86px; line-height: 85px; } .slider_site{ width: 100%; } .img_slider{ width: 100%; position: relative; } .slider_line{ width: 170px; height: 3px; background: #0192dc; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); position: absolute; top: 32%; left: 42%; } .slider_line_two{ width: 170px; height: 3px; background: #0192dc; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); position: absolute; top: 32%; left: 57%; } /*button*/ .button_a{ vertical-align: top; padding: 8px 30px; border: 2px solid #0092db; font-size: 14px; font-weight: 700; color: #fff; text-transform: uppercase; text-decoration: none; margin: 20px auto; transition: 0.1s linear; position: absolute; top: 59%; left: 39%; } .button_a:hover{ color: #0092db; text-decoration: none; } .button_a_one{ vertical-align: top; padding: 8px 30px; border: 2px solid #0092db; font-size: 14px; font-weight: 700; color: #fff; text-transform: uppercase; text-decoration: none; margin: 20px auto; transition: 0.1s linear; position: absolute; top: 59%; left: 52%; } .button_a_one:hover{ color: #0092db; text-decoration: none; }  
    • By marizza40
      Первый раз создаю сайт на хостинге. Не видит блок о компании. Он в конструкции есть, на сайте пустота.  

    • By digenis
      Проблема заключается в том что мне нужно чтобы изображение было на левом краю до конца блочного элемента, а список чтобы был справа и также до конца блочного элемента. Это все в заголовке.  https://jsfiddle.net/Lyguc520/3/

  • Member Statistics

    46,552
    Total Members
    3,128
    Most Online
    Liza1999
    Newest Member
    Liza1999
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.