Como chegar div altura para auto-ajustar ao tamanho de fundo?
https://stackoverflow.com/questions/600743
-
03-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPergunta
Como faço para obter uma div para ajustar automaticamente para o tamanho do conjunto de fundo I para ele sem definir uma altura específica (ou min-height) para ele?
Solução
Outra, talvez ineficiente, a solução seria incluir a imagem com um elemento img conjunto para visibility: hidden;. Em seguida, fazer o background-image da div em torno do mesmo que a imagem.
Isto irá definir o div circundante para o tamanho da imagem no elemento img mas exibi-lo como um fundo.
<div style="background-image: url(http://your-image.jpg);">
<img src="http://your-image.jpg" style="visibility: hidden;" />
</div>
Outras dicas
Há uma maneira muito agradável e fresco para fazer um trabalho de imagem de fundo como um elemento img assim que ajustar o seu height automaticamente. Você precisa saber o width imagem e relação height. Definir a height do recipiente para 0 e ajustar o padding-top como percentagem com base na relação da imagem.
Será parecido com o seguinte:
div {
background-image: url('http://www.pets4homes.co.uk/images/articles/1111/large/feline-influenza-all-about-cat-flu-5239fffd61ddf.jpg');
background-size: contain;
background-repeat: no-repeat;
width: 100%;
height: 0;
padding-top: 66.64%; /* (img-height / img-width * container-width) */
/* (853 / 1280 * 100) */
}
Você tem apenas uma imagem de fundo com a altura auto que irá funcionar apenas como um elemento img. Aqui é um protótipo de trabalho (você pode redimensionar e verificar a altura div): http://jsfiddle.net/TPEFn/ 2 /
Não há nenhuma maneira para ajustar automaticamente para o tamanho da imagem de fundo usando CSS.
Você pode cortar em torno dele, medindo a imagem de fundo no servidor e, em seguida, aplicar esses atributos ao div, como os outros.
Você também pode cortar um pouco de javascript para redimensionar a div com base no tamanho da imagem (uma vez que a imagem foi baixado.) - este é basicamente a mesma coisa
Se você precisa de seu div de auto-ajustar a imagem, eu poderia perguntar por que você não apenas colocar uma tag <img> dentro de sua div?
Esta resposta é semelhante a outros, mas em geral, é o melhor para a maioria das aplicações. Você precisa saber o tamanho da imagem antes da mão que você costuma fazer. Isso permitirá que você adicionar sobreposição de texto, títulos etc. sem preenchimento negativo ou posicionamento absoluto da imagem. A chave é ajustar o estofamento% para coincidir com a relação de aspecto de imagem como visto no exemplo abaixo. Eu costumava esta resposta e essencialmente acabou de adicionar um fundo da imagem.
.wrapper {
width: 100%;
/* whatever width you want */
display: inline-block;
position: relative;
background-size: contain;
background: url('https://upload.wikimedia.org/wikipedia/en/thumb/6/67/Wiki-llama.jpg/1600px-Wiki-llama.jpg') top center no-repeat;
margin: 0 auto;
}
.wrapper:after {
padding-top: 75%;
/* this llama image is 800x600 so set the padding top % to match 600/800 = .75 */
display: block;
content: '';
}
.main {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
color: black;
text-align: center;
margin-top: 5%;
}<div class="wrapper">
<div class="main">
This is where your overlay content goes, titles, text, buttons, etc.
</div>
</div>
Talvez isso pode ajudar, não é exatamente um fundo, mas você começa a idéia:
<style>
div {
float: left;
position: relative;
}
div img {
position: relative;
}
div div {
position: absolute;
top:0;
left:0;
}
</style>
<div>
<img src="http://antwrp.gsfc.nasa.gov/apod/image/0903/omegacen_davis.jpg" />
<div>Hi there</div>
</div>
certeza que isso nunca foi visto todo o caminho até aqui. Mas se o seu problema era a mesma que a minha, esta foi a minha solução:
.imaged-container{
background-image:url('<%= asset_path("landing-page.png") %> ');
background-repeat: no-repeat;
background-size: 100%;
height: 65vw;
}
Eu queria ter uma div no centro da imagem, e isso vai permitir-me disso.
Há uma solução CSS puro que as outras respostas ter perdido.
O "conteúdo". Imóvel é usado principalmente para inserir conteúdo de texto em um elemento, mas também pode ser usado para inserir o conteúdo da imagem
.my-div:before {
content: url("image.png");
}
Isto fará com que o div para redimensionar a sua altura para o tamanho real de pixel da imagem. Para redimensionar a largura também, adicionar:
.my-div {
display: inline-block;
}
Você pode fazê-lo do lado do servidor:. Medindo a imagem e, em seguida, definir o tamanho div, ou carregar a imagem com JS, ler seus atributos e, em seguida, definir o tamanho DIV
E aqui está uma ideia, colocar a mesma imagem dentro do div como uma tag IMG, mas dar-lhe visibilidade:. Escondida + jogo com posição relativa + dar este div a imagem como pano de fundo
Eu tive esse problema e encontrou a resposta de Hasanavi mas eu tenho um pouco de erro ao exibir a imagem de fundo em uma tela grande -. A imagem de fundo não se espalhou a toda a largura da tela
Então aqui está a minha solução -. Baseado no código do Hasanavi mas melhor ... e isso deve funcionar em ambas as telas extra-largas e móveis
/*WIDE SCREEN SUPPORT*/
@media screen and (min-width: 769px) {
div {
background-image: url('http://www.pets4homes.co.uk/images/articles/1111/large/feline-influenza-all-about-cat-flu-5239fffd61ddf.jpg');
background-size: cover;
background-repeat: no-repeat;
width: 100%;
height: 0;
padding-top: 66.64%; /* (img-height / img-width * container-width) */
/* (853 / 1280 * 100) */
}
}
/*MOBILE SUPPORT*/
@media screen and (max-width: 768px) {
div {
background-image: url('http://www.pets4homes.co.uk/images/articles/1111/large/feline-influenza-all-about-cat-flu-5239fffd61ddf.jpg');
background-size: contain;
background-repeat: no-repeat;
width: 100%;
height: 0;
padding-top: 66.64%; /* (img-height / img-width * container-width) */
/* (853 / 1280 * 100) */
}
}
Como você deve ter notado, as doas propriedade background-size: contain; não se encaixam bem em telas largas extra, ea propriedade background-size: cover; não se encaixa bem em telas móveis então eu usei este atributo @media para brincar com os tamanhos de tela e corrigir este problema.
Como sobre este:)
.fixed-centered-covers-entire-page{
margin:auto;
background-image: url('https://i.imgur.com/Ljd0YBi.jpg');
background-repeat: no-repeat;background-size:cover;
background-position: 50%;
background-color: #fff;
left:0;
right:0;
top:0;
bottom:0;
z-index:-1;
position:fixed;
}<div class="fixed-centered-covers-entire-page"></div>
Demonstração: http://jsfiddle.net/josephmcasey/KhPaF/
Se for uma imagem de fundo predeterminado único e você quer o div para ser responsivo sem distorcer a relação de aspecto da imagem de fundo, você pode primeiro calcular a relação de aspecto da imagem e, em seguida, criar uma div que preserva a sua relação de aspecto por fazendo o seguinte:
Digamos que você queira uma proporção de 4/1 e a largura da div é de 32%:
div {
width: 32%;
padding-bottom: 8%;
}
Isso resulta do facto de acolchoamento é calculada com base na largura do elemento que contém.
Pode ser isso pode ajudar, não é exatamente um fundo, mas você começa a idéia simples
<style>
div {
float: left;
position: relative;
}
div img {
position: relative;
}
div div {
position: absolute;
top:0;
left:0;
}
</style>
<div>
<img src="http://www.planwallpaper.com/static/images/recycled_texture_background_by_sandeep_m-d6aeau9_PZ9chud.jpg" />
<div>Hello</div>
</div>
Você pode fazer algo assim
<div style="background-image: url(http://your-image.jpg); position:relative;">
<img src="http://your-image.jpg" style="opacity: 0;" />
<div style="position: absolute;top: 0;width: 100%;height: 100%;">my content goes here</div>
</div>
Se este problema com o Umbraco CMS e neste cenário você pode adicionar a imagem para o div usando algo parecido com isto para o atributo 'estilo' da div:
style="background: url('@(image.mediaItem.Image.umbracoFile)') no-repeat scroll 0 0 transparent; height: @(image.mediaItem.Image.umbracoHeight)px"
Tenho lidado com esta questão por um tempo e decidi escrever um plugin jQuery para resolver este problema. Este plugin irá encontrar todos os elementos com class "show-bg" (ou você pode passá-lo seu próprio seletor) e calcular suas dimensões de imagem de fundo. tudo que você tem a fazer é incluir esse código, marcar os elementos desejados com class = "show
Aproveite!
A melhor solução que eu posso pensar é, especificando a sua largura e altura em porcentagem. Isto irá permitir que você rezise sua tela com base no seu tamanho do monitor. seus mais de disposição sensível ..
Para uma instância. você tem
<br/>
<div> . //This you set the width percent to %100
<div> //This you set the width percent to any amount . if you put it by 50% , it will be half
</div>
</div>
Esta é a melhor opção se você quiser um layout responsivo, eu não recomendaria float, em certos casos float é correto usar. mas na maioria dos casos, evitar o uso de flutuador, uma vez que irá afectar um bem de série de coisas quando você está fazendo testes de cross-browser.
Espero que isso ajude:)
na verdade, é muito fácil quando você sabe como fazê-lo:
<section data-speed='.618' data-type='background' style='background: url(someUrl)
top center no-repeat fixed; width: 100%; height: 40vw;'>
<div style='width: 100%; height: 40vw;'>
</div>
</section>
o truque é apenas para definir o div fechado apenas como um div normal com valores dimensionais mesmo que os valores dimensionais fundo (neste exemplo, 100% e 40vw).
Eu resolvi isso usando jQuery. Até que novas regras CSS permitir este tipo de comportamento nativamente Acho que é a melhor maneira de fazê-lo.
configurar o seu divs
A seguir você tem o seu div que deseja que o fundo para aparecer ( "herói") e, em seguida, o conteúdo interno / texto que deseja sobreposição em cima de sua imagem de fundo ( "interior"). Você pode (e deve) mover os estilos inline a sua classe herói. Deixei-os aqui por isso é rápido e fácil para ver o que os estilos são aplicados a ele.
<div class="hero" style="background-image: url('your-image.png'); background-size: 100%; background-repeat: no-repeat; width: 100%;">
<div class="inner">overlay content</div>
</div>
Calcular proporção de imagem
Em seguida calcular a relação de aspecto para a sua imagem dividindo a altura de sua imagem pela largura. Por exemplo, se a sua altura da imagem é 660 e sua largura é de 1280 a sua proporção é de 0,5156.
Configuração de um evento de janela de redimensionamento jQuery para ajustar a altura
Finalmente, adicione um ouvinte de evento jQuery para a janela de redimensionamento e, em seguida, calcular a altura o seu herói de div baseado fora da relação de aspecto e atualizá-lo. Esta solução normalmente deixa um pixel adicional na parte inferior devido à cálculos imperfeitos utilizando a relação de aspecto portanto, adicionar uma -1 para o tamanho resultante.
$(window).on("resize", function ()
{
var aspect_ratio = .5156; /* or whatever yours is */
var new_hero_height = ($(window).width()*aspect_ratio) - 1;
$(".hero").height(new_hero_height);
}
Certifique-se de que funciona no carregamento da página
Você deve executar a chamada de redimensionamento acima, quando a página é carregada para ter os tamanhos de imagem calculados no início. Se não o fizer, então o div herói não irá ajustar até que você redimensionar a janela. configuração I uma função separada para fazer os ajustes de redimensionamento. Aqui está a plena utilização de código I.
function updateHeroDiv()
{
var aspect_ratio = .5156; /* or whatever yours is */
var new_hero_height = ($(window).width()*aspect_ratio) - 1;
$(".hero").height(new_hero_height);
}
$(document).ready(function()
{
// calls the function on page load
updateHeroDiv();
// calls the function on window resize
$(window).on("resize", function ()
{
updateHeroDiv();
}
});
Se você pode fazer uma imagem no Photoshop onde a camada principal tem uma opacidade de 1 ou assim e é basicamente transparente, colocar esse img no div e, em seguida, fazer a imagem real a imagem de fundo. Em seguida, defina a opacidade da img a 1 e adicionar as dimensões de tamanho que você deseja.
Esse quadro é feito dessa maneira, e você não pode mesmo arrastar a imagem invisível para fora da página que é legal.
basta adicionar a div
style="overflow:hidden;"
