Tein CSS laatikon, jonka sisälle tulee kuva.
Laatikon korkeushan muuttuu automaattisesti kuvan korkeuden mukaan, mutta leveys ei. Miten saan leveyden ns. "automaattiseksi"?
Mitähän tarkalleen tarkoitat? Laatikolle display: inline-block?
<laatikko> ei tosiaan taida olla mikään tagi html:ssä. Eikä css:llä voi tehdä elementtejä. Hmm.
Lobbaan yleensä arvailua vastaan, mutta varmaankin juuri sitähän se nyt ihmettelee, että kun laittanut kuvan divin sisään ja div venyy block-elementtinä parenttinsa levyiseksi.
Voit laittaa (min-width) esim. 1. kuvan leveys, mutta mielestäni se ei ole paras vaihtoehto koska kun katsot kuvaa kännykällä niin saattaa tulla ongelmia (em, px).
Jos tarkoitus on että tuon laatikon (div) sisällä on vain yksi kuva niin:
div
{
height:auto;
min-height:40px;
}
/* Sitten on min-width, max-width, max-height */Tuossa lisätietoa: Mittasuhteet tutorial
- Onko kuva pakko olla "laatikossa"? Mitä on esimerkiksi laatikon oikealla puolella jos laatikko on vasemmalla... responsiivisuudessa pitäisi ottaa huomioon vaaka- ja pystysuuntainen näyttö ja käyttö.
Late, mitä vittua? AP kysyy apua leveyden määrittämiseen ja sinä tulet selittelemään korkeuksista. Min-width ei myöskään liity mitenkään tähän, koska ongelma on pituuden rajoittamisessa asteikon yläpäässä.
Random esimerkki..
<!DOCTYPE html>
<html>
<head>
<title>Apina</title>
<meta charset="UTF-8">
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600);
body {
font-family: 'Open Sans', Tahoma, Arial
}
figure {
display: inline-block;
padding: 10px;
margin: 0;
background-color: #424242;
}
figcaption {
font-size: 11px;
color: #E6E6E6;
padding: 5px 0;
}
</style>
</head>
<body>
<figure>
<figcaption>Apinat ryhmään kuuluvat lajit ovat alun perin kotoisin Afrikasta ja Aasiasta</figcaption>
<img src="http://www.xpression.fi/blogi/wp-content/uploads/2010/09/apina.jpg" alt="Apina" />
</figure>
</body>
</html>The Alchemist kirjoitti:
<laatikko> ei tosiaan taida olla mikään tagi html:ssä. Eikä css:llä voi tehdä elementtejä. Hmm.
Tosin tässä väitettykään, että sellainen tagi olisi tai että CSS:llä olisi tehty elementti. Muuten aiheellinen fleimi. ☺
lainaus:
Lobbaan yleensä arvailua vastaan, mutta varmaankin juuri sitähän se nyt ihmettelee, että kun laittanut kuvan divin sisään ja div venyy block-elementtinä parenttinsa levyiseksi.
Niinpä. Ja tähän tietysti voisi vastata, että ratkaisuksi sopii asettaa div-elementille sama leveys kuin kuvalle, olettaen, että elementin sisällä ei ole mitään muuta (jolloin tosin voi kysyä, miksi se sitten on olemassa).
Jos vähän kiillotetaan kristallipalloa, niin sieltä taitaa näkyä, että kysyjä haluaisi asettaa leveyden joustavammin kuin kiinteänä, niin että samaa koodia voisi käyttää eri kuville ja että koodia ei tarvitse muuttaa, jos kuva vaihdetaan toisenlevyiseen.
Vastauksia tähänkin on valotettu hiukan, mutta asia kyllä riippuu kontekstista. Asetus display: inline-block on yksi tapa, mutta sitä eivät ihan kaikki selaimet tue, ja lisäksi se vaikuttaa elementin sijaintiin suhteessa muihin (siitä tulee tekstitason elementti, eli se tässä tavallaan poistaisi div-elementin vaikutuksen...). Sen sijaan float: left on varmempi, mutta sekin aiheuttaa myös muuta, jota ei välttämättä haluta. Merkitystä on silläkin, halutaan laatikon korkeus täsmälleen samaksi kuin kuvan; näin nimittäin ei normaalisti käy.
Yucca kirjoitti:
Jos vähän kiillotetaan kristallipalloa, niin sieltä taitaa näkyä, että kysyjä haluaisi asettaa leveyden joustavammin kuin kiinteänä, niin että samaa koodia voisi käyttää eri kuville ja että koodia ei tarvitse muuttaa, jos kuva vaihdetaan toisenlevyiseen.
Haen juuri tuota. Kyseessä on koodi, joka tulostaa sivulle käyttäjien lataamia kuvia, joten niiden leveys vaihtelee. Kuvat sijoitetaan laatikkoon. Järjestelmän idea on olla kuitenkin automaattinen, joten en voi tehdä joka leveykselle laatikkoa yms. Anteeksi kun selitin vähän huonosti.
Kokeilin "float: left;", mutta se sekoitti laatikot kuvineen ympäri sivua, mutta "display: inline-block" toimi juuri niinkuin halusin, ainakin kun lisäsin laatikon css-koodiin "padding: 20px;".
Kiitos :)
Aihe on jo aika vanha, joten et voi enää vastata siihen.