Jump to content
  • 0

Картинка не ужимается до размеров блока!

Temik2704

Asked by Temik2704,

 Share

Question

Temik2704 Explorer

Temik2704

Posted
Posted

Ребят поясните мне.Имею вот такой код.Цель - чтобы картинка которая по размерам изначально 564*589 px ужалась сама в блок span.Почему этого не происходит?Ведь я задал класс .juy где есть атрибут display:block.

Также размер блока photo (до размеров которого как раз и должна уменьшиться картинка) составляет 150px.

Помогите пожалуйста!

fjEwmw5v71c.jpgEoZ9HndKISs.jpg

Link to comment
Share on other sites

4 answers to this question

Recommended Posts

  • 0
Temik2704 Explorer

Temik2704

Posted
  • Author
Posted

попробуй задать тегу img width="100%"

Или как вариант - сделать картинку бэкграундом у тега span и ему уже прописать свойство background-size: contain(или "100% 100%", как больше нравится);

Спасибо за совет!

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing

  • Similar Content

    • Five
      Помогите с Работой
      By Five
      Как можно поднять фиолетовый блок (находится в MAIN) вверх , чтобы он заполнил верхнюю прозрачную часть заднего плана HEADER-а?
      Свое образный переход будет... 

    • Etaro
      Менюшка :<
      By Etaro
      Я не понимаю, в чём проблема в вертикальном выпадающем меню. Где я мог напортачить? Нужно сделать, чтобы колонки были по вертикали, а не по горизонтали.


    • IT Курсы Avenue
      IT Курсы Avenue
      By IT Курсы Avenue
      IT - Avenue – курсы программирования в аудиториях и онлайн.
      Реальный выпускной проект и подготовка к трудоустройству!
       
      Avenue – современный центр подготовки IT-специалистов. Наши курсы – настоящая пошаговая инструкция о том, как стать крутым IT-специалистом и зарабатывать в $!

       
      Направления:
      Программирование (Java, PHP, Python, Scala, C++, C#, Javascript)
      Веб-разработка
      Разработка игр на Unreal Engine
      Мобильная разработка: Android, iOS (Swift)
      Робототехника
      Blockchain
      Дизайн: графический и Web-дизайн
      Тестирование: Тестирование ПО и Автоматизированное тестирование
      Разработка сайтов: интернет-магазины, CMS Wordpress, HTML+CSS
      Маркетинг: SMM, Интернет-маркетинг, контекстная реклама
      IT и администрирование: проектный менеджмент, IT –рекрутинг
      Excel (Продвинутый уровень – работа с формулами)

       
      Почему именно IT Школа Avenue?
      Обучение на практике.
      Независимо от курса, мы обучаем студентов ТОЛЬКО на практике! Искренне верим в догму практического применения знаний и предпочитаем «закреплять на практике» все приобретённые навыки.
      Преподаватели – реальные айти-шники, маркетологи и менеджеры.
      Первое правило эффективного обучения – компетентный специалист. Мы не сотрудничаем с преподавателями ВУЗ-ов и со специалистами, чей суммарный опыт работы в IT менее 5-ти лет. Главная цель IT Avenue – подготовка квалифицированных кадров для IT-компаний, которые готовы к решению рабочих задач сразу после выпускного.
      Обучение «с нуля»
      Учебная программа (независимо от курса) рассчитана на новичков, которые хотят освоить профессию «с нуля». Совершенно не стоит переживать за уровень своих начальных знаний. Даже если вы никогда не открывали среду разработки – наши преподаватели помогут вам разобраться во всех тонкостях новой IT-профессии.
      Единственное обязательное условие – желание обучится чему-то новому!
      Онлайн сертификат и помощь в трудоустройстве.
      Абсолютно все студенты получают на руки сертификат фирменного образца и его онлайн-копию, которую можно прикрепить к своему резюме.
      После окончания курса каждый студент получит уникальную возможность пройти 2-х часовой Интенсив по трудоустройству, на котором опытный рекрутер расскажет об ошибках на первом собеседовании; о том, что такое Качественное резюме и об общих правилах собеседования в IT-компании.
      Реальный финальный проект
      Каждый курс предполагает создание Финального Проекта. Финальный проект – это программа, написанная на одном из языков программирования, созданный студентом сайт, дизайн интерфейса или маркетинговая стратегия продвижения. На последнем занятии студенты вместе с преподавателем регистрируются на сервисах создания онлайн-портфолио и размещают туда свой первый учебный проект, который будет свидетельствовать о профессиональной компетентности студента.
      С нами не будет легко
      Да, мы можем использовать маркетинговый ход и написать «Стать программистом за пару недель? Легко, вместе с нами!», но мы хотим быть честными со своими студентами!
      Стать программистом трудно, но возможно! Вам придется: много учится, добросовестно выполнять домашние задания и повторно обрабатывать материал дома. Следуя всем нашим инструкциям и заданиям, вы будете готовы к реальному трудоустройству на 100%!
      Формат и условия обучения:
      занятие 2 раза в неделю по 2 часа в вечернее время: с 19:30 до 21:30 (дни занятий определяет группа)
      возможны разные варианты оплаты: «Оплата одним платежом» и «Оплата частями»
      возможность использовать учебный ноутбук
      кофе-бар для студентов IT Avenue
      Контакты:
      наш телефон: 8 917 552 03 33
      наш сайт: it.avenue-pro.ru
    • wavelolmu
      Непонятный отступ
      By wavelolmu
      Всем привет!

      Мне нужно сделать горизонтальное меню посередине страницы. Я его сделал и через <ul>, при этом width 100% и margin 0, но почему-то слева возник отступ от края страницы. Градиент на заднем плане - это background-image, и там болжны быть белые отступы, потому что картинка такая, а отступ у меню быть не должен..
      Не подскажите, как это исправить?  Код и скриншоты прилагаю.
       
      <body> <div class="topnav"> <ul> <li ><a href="default.asp" id="first">Л1</a></li> <li><a href="news.asp" id="second">Ф2</a></li> <li><a href="contact.asp" id="third">С3</a></li> <li><a href="about.asp" id="fourth">О4</a></li> </ul> </div> </body> body { background-image: url("https://sun1-20.userapi.com/c830108/v830108125/1c35a9/gYiNRO0w7sw.jpg"); background-size: cover; } .topnav { margin: 0 auto; } ul { list-style-type: none; position: absolute; margin: 0 auto; margin-top:23.5%; padding: 0 ; overflow: hidden; height: 83px; width: 100%; } li { float: left; display: inline; } li a { display: block; text-align: center; padding: 24px 34px; }  

    • GrowStay
      Помощь со "Скролируемом Меню" на html
      By GrowStay
      Здравствуйте, у меня такая проблема. Я хотел сделать скролируемое меню с ссылками на ресурс. Написал команду, и т.д. Выучил только теги html, к CSS (или как там) даже не прикасался. Так как сделать скролируемое меню с ссылками, если это вообще возможно. Объясните пожалуйста. 
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept