3

Tenho a seguinte estrutura:

<div class="bg">
    <img src="view/img/planta-supermercado.png" id="bg">
    <div class="bg-scroll" id="bg-scroll">
        <img src="view/img/planta-supermercado.png" id="bg-mobile">
    </div>
</div>

quando abrir a página pelo mobile, ele carrega a div com o id bg-scroll

o que eu preciso é que a imagem fique 100% na altura e proporcional na largura(a largura é maior que a altura)... e para isso acontecer eu devo criar um scroll horizontal apenas na imagem(ou na div bg-scroll) para que o usuário consiga ver toda a imagem.

Obrigado!

3 Respostas 3

2

Cara eu não entendi direito o que vc quer. Mas acredito que seja algo como isso. Mas se não for exatamente isso é só dar um toque.

OBS: Aqui eu usei valores pequenos para simular que vc está em uma tele de celular etc. O que eu fiz foi colocar um overflow:auto na div pai basicamente.

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
.bg {
    width: 20vw;
    height: 100vh;
    overflow-y: hidden;
    overflow-x: auto;
    background-color: #f00;
}
    
.bg img {
    display:block;
    min-height: 100vh;
    width: auto;
}
<div class="bg">
    <!-- <img src="view/img/planta-supermercado.png" id="bg"> -->
    <div class="bg-scroll" id="bg-scroll">
        <img src="http://placecage.com/300/100" id="bg-mobile">
    </div>
</div>

6
  • Eu tinha colocado errado na publicação, é exatamente isso que preciso, mas a barra é na horizontal, desculpe. Commented 28/05/2018 às 16:05
  • Agora o scroll na horizontal está certo, porém quero que a imagem fique 100% de altura, e a largura fique do tamanho necessário para não perder a proporção Commented 28/05/2018 às 16:19
  • como a imagem é mais larga, a barra iria aparecer dessa forma que você fez, apenas na horizontal Commented 28/05/2018 às 16:20
  • @OtavioSouzaRocha dei uma editada novamente, olha ai se agora ficou certo
    – hugocsl
    Commented 28/05/2018 às 16:22
  • Isso mesmo, mais uma vez, obrigado!!! Commented 28/05/2018 às 16:49
1
.bg {
   width: 100%;
   height: 100vh;
}

Se estiver usando viewport facilita seu trabalho. A unidade vh basicamente verifica "quantos % da tela" seu elemento ocupará

0

Primeiro o css para sua imagem:

#bg-mobile{
  position: relative;
  width: 100%;
  margin:0;
  padding:0;
}

Agora a div:

#bg{
  position: relative;

}

Com este css sua div ficará em bg

3
  • Eu preciso que a imagem fique 100% height e o width fique proporcional, maior que a tela, e para que o usuário consiga vizualizar toda a imagem, um scroll vertical apareceria apenas na div com a imagem Commented 28/05/2018 às 14:16
  • dessa forma que você fez, a imagem fica 100% largura, mas na altura ela fica pequena Commented 28/05/2018 às 14:17
  • Na forma como especificou no primeiro comentário, da a entender que vc quer que ele fique proporcional na largura, assim sendo vai gerar um scroll horizontal, um dos dois requisitos nao parece estar certo, ou ele vai ter scroll vertical ficando com largura 100% e altura proporcional ou ele vai ter scroll horizontal, ficando 100% de altura e largura maior q a tela. Commented 28/05/2018 às 17:15

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .