Sign in to follow this  
Kat

Как вписать картинку в div?

Recommended Posts

А можно как-нибудь вписать image в div фиксированного размера (120x120), чтобы image сжимался, не растягивая див и укладываясь в размер 120x120 (сохраняя пропорции). То есть, если изображение маленькое, 10x20, например, чтобы выглядело как 10x20. Если изображение, 120x180, например, чтобы выглядело как ширинаx120. В общем, если картинка маленькая (меньше 120x120), пусть остается маленькой, как есть. А если большая, пусть пропорционально сжимается, не растягивая родительский div. Но при этом css непосредственно картинке задавать нельзя, только внешним дивам

У меня получилось так, что див растягивается:


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Тег STYLE</title>
<style type="text/css">
.mm {

background-color: blue;
max-width:120px;
max-height:120px;

}
</style>
</head>
<body>
<div class="mm">

<img src="http://spanish-online.ru/wp-content/themes/nice-wee-theme/images/me.jpg" >

</div>



</body>
</html>

PS: я знаю, что для этой задачи идеально подойдет max-width и max-height для img, но я делаю все на тибко (generalinterface.org), где верстка преобразуется в дивы и css непосредственно для img я задать не могу, только для внешнего дива, отсюда такое странное условие задачи.

Edited by Kat

Share this post


Link to post
Share on other sites

Может для дива overflow:auto установить?

Тогда при картинках, не помещающихся в блок, будет появляться полоса прокрутки.

Edited by web-monster

Share this post


Link to post
Share on other sites

Неужели совсем никакой возможности свои стили картинкам приписать? Хоть <style> в <body> затолкать, на самый-самый крайний случай, если больше совсем уж ничего не остается...

Share this post


Link to post
Share on other sites

Неужели совсем никакой возможности свои стили картинкам приписать? Хоть <style> в <body> затолкать, на самый-самый крайний случай, если больше совсем уж ничего не остается...

вместо img имеем div c img внутри, и вот этому внешнему диву можно приписывать что угодно, например max-width, max-height задать, или вписать в еще один див. Но картинка все равно выпирает (а самой картинке нельзя ничего задать).

Share this post


Link to post
Share on other sites

вместо img имеем div c img внутри, и вот этому внешнему диву можно приписывать что угодно, например max-width, max-height задать, или вписать в еще один див. Но картинка все равно выпирает (а самой картинке нельзя ничего задать).

А разве так сделать нельзя?


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

Share this post


Link to post
Share on other sites

или ваще вот так:

.div_class * {

max-width: 100%;

max-height: 100%;

}

с высотой, правда скорей всего от родителя с max-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
Sign in to follow this  

  • Member Statistics

    46,389
    Total Members
    3,128
    Most Online
    Неугомонный
    Newest Member
    Неугомонный
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.



  • Спрашивают сейчас

  • Пишут сейчас

    • https://jsfiddle.net/q2Lfaew5/2/ Пытаюсь добавить иконку к ссылке. Казалось бы, довольно простая задача, но есть несколько условностей, из-за которых пока ничего не получается. 1) Текст должен быть inline-элементом. Для того, чтобы к каждой строке применялась граница, и пустота в них была не кликабельной (как в первом примере). 2) Иконка всегда должна быть вертикально отцентрированная. Реально ли это сделать?
    • Здравствуйте. Почему в этом примере https://jsfiddle.net/pk2rgj3o/4/ в IE11 не срабатывает max-width для изображения? Мне нужно, чтобы фото не выходило за пределы родителя, при этом его ширина и ширина flex-item оставались автоматическими. В данный момент я нашел два решения этой проблемы: 1) width: 100% для фото и 2) flex: 1 для flex-item, но они оба не подходят.
    • Задаю контенту фиксированную высоту, но все равно он под футером. Вы не знаете, лучше оставить высоту футера auto?   <main class="project">
          
          <div class="blog-container">
              <div class="blog-header">
                  <div class="blog-cover">
                      
                  </div>
              </div>
              <div class="blog-body">
                  <div class="blog-title">
                      <h1><a href="#">Lorem ipsum dolor sit amet</a></h1>
                  </div>
                  <div class="blog-text"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque sapiente quae enim eius sit ratione doloremque, non quo, quaerat soluta sint aspernatur nostrum doloribus dolor perferendis saepe numquam molestiae rerum. Iusto explicabo molestias cumque expedita officia repellendus excepturi vitae iure.</p>
                  </div>
                  <div class="blog-tags">
                      <ul>
                          <li><a href="#">Lorem</a></li>
                          <li><a href="#">ipsum</a></li>
                          <li><a href="#">dolar</a></li>
                          <li><a href="#">consectetur</a></li>
                      </ul>
                  </div>
              </div>
              <div class="blog-footer">
                  <ul>
                      <li class="published-date">4 days ago</li>
                  </ul>
              </div>
          </div>     
      </main> <footer>
          
      <nav>
          
      <a href="index.html">HOME</a>
                      <a href="projects.html">PROJECTS</a>
                      <a href="blog.html">BLOG</a>
                      <a href="contact.html">CONTACT</a>
                      <a href="about.html">ABOUT</a>
                      <a href="services.html">SEVICES</a>
                      <a href="location.html">LOCATION</a>
                       </nav>
      <div class="logo">
          <a href="index.html"><img class="graphiclogo" src="logo.png" alt="logo"></a>
      </div>
      <div class="social">
          <a href="#"><img src="img/social/em.png" alt="em"></a>
          <a href="#"><img src="img/social/face.png" alt="em"></a>
          <a href="#"><img src="img/social/goo.png" alt="em"></a>
          <a href="#"><img src="img/social/inst.png" alt="em"></a>
          <a href="#"><img src="img/social/pint.png" alt="em"></a> </div> <p>Version 2019</p>
      </footer>
          <script src="js/script.js"></script>
      </body>                     .blog-container {
          background: #fafafa;
          border-radius: 5px;
          box-shadow: rgba(0,0,0,0.2) 0 4px 2px -2px;
          font-weight: 100;
          margin: 48px auto;
          margin-bottom: 100px;
          width: 50rem;
          height: 20px; } footer {
          width: 100%;
          height: auto;
          background: black;
          margin: 0 auto;
          text-align: center;
          padding-top: 25px;
          position:absolute; 
          bottom:0
      }
  • Popular Contributors