CSS Fazer a imagem respeitar tamanho da div?

brunovianarenega · 31 de dezembro de 2021

Porque a imagem não respeita o tamanho da div e se ajusta? No caso, subcontent-2

Esta excedendo os 1250px do content

.content {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content:center;
  width: 1250px;
}

.subcontent-1 {
    width: 625px;
    text-align: justify;
 
}

.subcontent-2 {
    width: 625px;
}

html

<div class="main-content">
  <div class="content">
    <div class="subcontent-1">
      <p><h1>Torne-o seu</h1></p>
      <p><h2>Configure e tema exatamente como você esperava de qualquer ferramenta de desenvolvimento moderna. Se você escolher um dos temas padrão já instalados ou explorar novos temas do Visual Studio Marketplace, você terá a liberdade de tornar seu editor ou IDE realmente seu.</h2></p>
      <p><a href="">Saiba mais</a>
    </div>
    <div class="subcontent-2">
      <img src="https://visualstudio.microsoft.com/wp-content/uploads/2021/10/MakeItYourOwn_Illustration.svg">
    </div>
  </div>
</div>

DiF · 1 de janeiro de 2022

@brunovianarenega Experimenta definir a regra de tamanho width para a imagem como a medida "VW".

Código:

<div class="box">
  <img src="https://ae01.alicdn.com/kf/HTB1LEHOMpXXXXXGXpXXq6xXFXXX6/Liga-de-alum-nio-Pr-tica-Artesanal-Japon-s-katana-espada-samurai-completa-tang-katana-luz.jpg" />
</div>

.box{
  max-width:500px;
  width: 500px;
  height: 400px;
  background: red;
  
}

.box img{
  max-width:500px;
  width: 50vw;
}

Exemplo: https://jsfiddle.net/dife/zysk21fm/1/

Experimente arrastar a divisa do site pro lado esquerdo.. vai ver que a imagem vai diminuir automaticamente, se puxar pra direita, vai aumentar a imagem, porém com a limitação da div, onde foi definido um max-width ou seja, a imagem não deve ultrapassar o limite dela.

brunovianarenega · 2 de janeiro de 2022

Estou com 2 problemas, o primeiro é que, quando uso o menu fixado, ele sobrepoe a div do conteudo antes de rolar a pagina.

Segundo, o menu esta ficando transparente antes de rolar, e não quando rolo a pagina apenas.

<div class="nav1">
  <div class="nav2">
    <div class="nav3">
      <ul class="navmenu">
        <li><a href="" class="logo-svg"></a></li>
        <li><a href="">Produto</a></li>
        <li><a href="">Produto</a></li>
        <li><a href="">Produto</a></li>
        <li><a href="" class="">Produto</a></li>
        <li><a href="" class="">Produto</a></li>
      </ul>
    </div>
  </div>
</div>

<div class="content1">

  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus non turpis consequat, hendrerit justo ac, elementum ex. Nulla viverra nec nibh et interdum. Cras malesuada dignissim justo, non egestas risus viverra in. Phasellus placerat consectetur ipsum. Donec at egestas eros. Nam auctor nulla nisl, ac lobortis purus dignissim quis. Nam finibus eget dolor in consectetur. Curabitur iaculis urna in pulvinar euismod. Donec dignissim, justo at eleifend lobortis, purus risus eleifend odio, eu eleifend ante risus quis neque. Curabitur id lacus ut est mollis egestas sit amet in quam. Integer nec libero id libero pellentesque varius ut at enim. Morbi nec laoreet dui, non eleifend arcu. Maecenas eget risus in sapien mattis dignissim.

Fusce at nulla sapien. Ut pharetra magna eu tempus consectetur. Nunc efficitur eu elit id molestie. Cras at laoreet orci, id ornare justo. Nullam in faucibus sem. Nunc tristique feugiat congue. In iaculis laoreet efficitur. Quisque quam mi, elementum in velit eget, faucibus viverra magna. Cras tincidunt, massa ut aliquet vulputate, sapien ipsum semper augue, et rutrum enim nunc ut lectus. Aenean posuere quam elit, eu tempor dui tincidunt quis. Integer arcu ante, tristique eget porta nec, pulvinar in augue. Nunc lacinia, justo nec interdum sodales, magna enim condimentum turpis, sed aliquam mauris augue at libero.

Donec placerat interdum sem, ac congue magna auctor eu. Sed a turpis ante. Aliquam erat volutpat. Integer volutpat, tortor id condimentum porta, quam nisi accumsan sapien, ac consequat turpis orci ullamcorper velit. Praesent id lobortis ligula. Duis auctor purus vitae tortor faucibus, id laoreet lectus scelerisque. Aenean a metus ex. Aliquam purus lorem, laoreet vel porttitor vitae, scelerisque at quam. Nam et faucibus purus. Integer velit tellus, aliquam vel ultrices vestibulum, facilisis pharetra nisi.

Pellentesque ullamcorper lectus non porta malesuada. Aliquam erat volutpat. Praesent maximus, nisl et posuere molestie, dui massa ultricies arcu, non aliquam magna sem volutpat quam. Nunc enim urna, venenatis id cursus quis, interdum eget arcu. Fusce lacinia lectus risus. Maecenas auctor, leo in commodo finibus, eros leo laoreet neque, vel tristique augue nisi ut enim. Nunc cursus sapien sit amet nulla porttitor tempus id eu odio. Aenean quis pulvinar tellus, vitae molestie ligula. Fusce eu diam ipsum. Vivamus viverra tempus nulla, nec posuere magna consequat ac.

Cras posuere urna eu blandit vestibulum. Ut lobortis lorem sed nunc feugiat maximus. Aenean in hendrerit elit, eu dictum nunc. Quisque varius congue congue. Sed id lorem ipsum. Cras congue dolor augue, ut blandit erat porta a. Suspendisse ac massa eget enim tincidunt ullamcorper. Maecenas augue ex, imperdiet sed ipsum a, tristique vulputate sapien. Phasellus ut elit ut est dapibus elementum ac pharetra tellus. In in lacus at ante semper ultrices. Maecenas dapibus sem at orci pretium porta. Aenean non est at orci efficitur facilisis. Donec scelerisque ante eu libero condimentum vehicula. Maecenas dignissim erat vestibulum dui vestibulum malesuada. Aliquam id eros et urna sodales ultricies vel et eros.

Donec interdum nisi eget sem pellentesque, sed imperdiet eros tincidunt. Phasellus sollicitudin imperdiet nisl et convallis. Vivamus pulvinar tristique odio, sit amet tristique nulla lacinia eget. Nam pretium enim venenatis, luctus risus porttitor, ultricies mi. Quisque molestie quam viverra mi pellentesque iaculis. Cras semper sagittis neque, nec tempor enim congue nec. Maecenas risus lectus, commodo sit amet arcu vel, ullamcorper luctus tellus. Phasellus a finibus odio. Morbi aliquam dignissim urna, vel blandit lorem scelerisque ac. Proin quam metus, maximus aliquet sagittis ac, fringilla vel sem. Donec id augue ipsum.

Suspendisse tortor tellus, feugiat vel urna vel, ullamcorper viverra est. Aliquam at risus ex. Vivamus nec pulvinar nunc. Cras pulvinar ipsum et mauris elementum, sit amet consequat nunc sagittis. Donec ac cursus lectus, in suscipit dolor. Phasellus et sapien non libero auctor malesuada eget vel feliz. Donec tristique ut nulla quis condimentum. Quisque vel auctor tortor. Quisque lobortis porta ligula, nec rutrum nulla mattis in. Aliquam faucibus faucibus feliz, id mollis mauris bibendum vitae. Aliquam pharetra, dolor eget vehicula scelerisque, leo metus suscipit ipsum, vel egestas est ligula ut eros.

Suspendisse maximus ante mi, eget ullamcorper turpis consequat et. Sed efficitur pharetra velit laoreet rutrum. Phasellus pharetra est nec rhoncus fermentum. Proin sed turpis in nibh rhoncus euismod. Curabitur orci nulla, posuere sed vestibulum vitae, elementum ac purus. Curabitur ullamcorper, quam nec accumsan imperdiet, metus dui pellentesque libero, et fermentum erat turpis sit amet ligula. Vivamus non convallis lectus. Etiam consequat turpis vitae magna sagittis, semper commodo lectus porta. Morbi nulla ante, ornare id ligula vitae, efficitur aliquam velit. Ut cursus leo a iaculis consequat. Curabitur malesuada justo vitae nulla mollis, quis rhoncus eros interdum. Integer vulputate, diam quis blandit mollis, neque magna condimentum mauris, et semper leo lacus sit amet metus. Suspendisse eu semper massa, auctor ultrices neque. Donec tincidunt dolor feliz, id tempor lorem mollis vel. Proin viverra mi dui, nec rhoncus elit dictum quis.

Maecenas sed risus tincidunt, tristique ante ornare, tempor sem. Donec ut metus lorem. Nam egestas pretium nunc, vitae eleifend risus placerat vel. Maecenas finibus iaculis turpis id pellentesque. Donec velit eros, viverra sit amet vestibulum eget, interdum a lectus. Cras quis imperdiet nulla, vel venenatis odio. Nulla in suscipit elit. Vivamus eu porta nunc, eget egestas nunc. Sed eget ex purus. Curabitur consequat, nunc nec facilisis auctor, tortor arcu dignissim dui, ac vehicula nunc neque vel mauris. Ut est nunc, facilisis et ornare nec, tincidunt placerat augue. Ut pharetra pellentesque mi.

Phasellus tristique venenatis risus sed ultricies. Curabitur porttitor blandit erat, eu aliquet risus mollis non. Curabitur in malesuada nisl. Phasellus tellus enim, sagittis vel semper ut, malesuada quis lectus. Duis quis feliz in neque condimentum congue at at eros. Sed dapibus dapibus velit in tristique. Etiam aliquet eleifend nibh, ac suscipit elit faucibus at. Donec pulvinar, tortor et feugiat feugiat, metus nisl dapibus orci, non lacinia arcu feliz in magna. Sed feliz urna, luctus sed consectetur eu, semper quis elit.

Maecenas mauris erat, varius vel tempor non, porttitor ut magna. Nulla volutpat augue et neque consequat, vel sollicitudin metus porta. In elementum sit amet dui ac varius. Maecenas vitae tortor vitae purus luctus sagittis molestie in turpis. Nullam ut neque eget urna elementum lobortis ut vehicula velit. In placerat nunc elit, quis venenatis magna cursus in. Suspendisse varius id feliz in maximus. Nullam at congue leo.

Praesent porttitor turpis sit amet scelerisque volutpat. Etiam sagittis et orci vitae vehicula. Vestibulum dapibus erat eu bibendum feugiat. Proin sed metus at nisl luctus elementum non ac diam. Praesent semper tincidunt nisi eu varius. Vestibulum ut mi consectetur, interdum metus vitae, accumsan nisi. Nunc rhoncus et lorem ut gravida.

Mauris nec eros maximus dolor vestibulum mollis. Aenean interdum ipsum arcu, et maximus neque imperdiet ut. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum elementum ligula eget magna condimentum ornare. Etiam dapibus lorem risus, vitae varius ipsum facilisis ac. Nulla finibus urna id elit tincidunt eleifend eu in velit. Mauris consequat diam lorem, sit amet pellentesque nisi ultrices at. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pharetra dolor a lectus mollis, id interdum neque aliquam. Quisque egestas pellentesque sapien, nec iaculis turpis vulputate sed.

Integer ut lectus et dui gravida fermentum vitae nec odio. Proin neque purus, malesuada id libero ut, euismod tempor feliz. Morbi at molestie mauris. Aenean semper pellentesque erat, in posuere mi imperdiet quis. Cras et nunc sit amet leo luctus commodo id et libero. Praesent quis pellentesque erat, vestibulum ornare urna. Morbi nisl ipsum, viverra sit amet eros eu, porttitor varius ligula. Aenean lobortis diam ut mattis imperdiet. Donec sollicitudin suscipit efficitur. Pellentesque ut dictum dui, sed tristique nisl. Curabitur pulvinar lacinia ligula a sodales. Quisque nibh tortor, ultrices non nulla eget, pulvinar sagittis ipsum.

Maecenas pulvinar pretium ex vel tempor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Fusce quis rhoncus sapien. Cras malesuada dapibus augue vel feugiat. Quisque id porta dui. In hac habitasse platea dictumst. Pellentesque bibendum dictum lectus at ullamcorper. Etiam diam leo, blandit ac viverra ac, porta a nisi. Aenean vel orci quis nibh venenatis aliquet. Fusce gravida placerat augue, ac porta orci vestibulum ac. Phasellus interdum dolor a iaculis faucibus. Proin ultrices justo id posuere facilisis.</p>
</div>

css

@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro");

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  outline: 0;
}

.nav1 {
  display: flex;
  position: fixed;
  background: rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(7px);
  width: 100%;
  height: 5vh;

}

.nav2 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 90%;
  max-width: 1000px;
  margin: auto;
}

.logo-svg {
    background: url('https://upload.wikimedia.org/wikipedia/commons/2/2f/Google_2015_logo.svg');
    display: block;
    background-position: center;
    background-size: 90px;
    background-repeat: no-repeat;
}

.nav3 ul {
  display: flex;
  justify-content: baseline;
  align-items: center;
}
.nav3 ul li {
  list-style: none;
}

.nav3 ul li a {
  text-decoration: none;
  color: black;
  font-size: 14px;
  padding: 1rem;
  transition: all 250ms linear 0s;
}

.nav3 ul li a:hover {
  color: red;
}

.content1 {
  background-color: blue;
  height: 1100vh;
  width: 90%;
  max-width: 1000px;
  margin: auto;
}

thefill · 3 de janeiro de 2022

Oi @brunovianarenega !

4 horas atrás, brunovianarenega disse:

Estou com 2 problemas, o primeiro é que, quando uso o menu fixado, ele sobrepoe a div do conteudo antes de rolar a pagina.

Segundo, o menu esta ficando transparente antes de rolar, e não quando rolo a pagina apenas.

Para revolver isso você pode usar esse código javascript:

window.addEventListener('scroll', function () {
  const nav1 = document.getElementById('nav1');
  nav1.classList.toggle('menu_fixo', window.scrollY > 0);
});

Adicionar um id no seu nav, dessa forma:

<div id="nav1" class="nav1">

E por ultimo, adicionar uma nova classe no seu arquivo css, assim:

.menu_fixo {
  position: fixed;
}

Resumindo o que tudo isso faz, dessa forma você cria um menu static no seu site e que toda vez que o usuário descer a pagina esse mesmo menu ganha a propriedade fixed, ficando de forma fixa durante todo o resto da pagina.

Veja o exemplo que eu fiz usando o código que você disponibilizou:

Exemplo