Forum PHP.pl

Witam,

Zaważyłem że jeśli użyję img { max-width: 100%; } to obrazek wewnątrz tabeli nie jest responsywny - http://jsfiddle.net/PeAAb/115/
Czy wiecie jak rozwiązać ten problem?

Ten post edytował AboutMe 5.06.2013, 12:30:02

Nie zaczyna się klas od liczby.





Ten post edytował Talidali 5.06.2013, 12:33:36

Witam.

Sprawa jest dość oczywista.

Tabela nie jest responsywna.

[CSS] pobierz, plaintext 
table { width: 500px; }
[CSS] pobierz, plaintext 

A obrazek wyświetla się blokowo na całą jej szerokość.

Jak naprawić:

Przykładowo tak -> http://jsfiddle.net/PeAAb/116/

OK, to zapiszcie poniższy kod w pliku html i odpalcie w przeglądarce, zobaczycie że reponsywność nie działa, na dole pojawia się suwak

[PHP] pobierz, plaintext 
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
 
<style type="text/css" media="screen">
table { width:100%; }
.col1 { width:150px; background:#000000; color:#ffffff; }
td.tdimg img { max-width:100%; }
</style>
 
 
<table>
    <tr>
        <td class="col1">xxxxx</td>
        <td class="tdimg"><img src="http://farm6.staticflickr.com/5338/8943869261_bd2e9d3d2d_o.jpg" /></td>
    </tr>
</table>
[PHP] pobierz, plaintext 

Ten post edytował AboutMe 5.06.2013, 12:48:50

Patrzyłeś na mój przykład? Bo w min kod CSS wygląda tak:

[CSS] pobierz, plaintext 
img { max-width: 100%;}
@media screen and (max-width: 25em) {
    .tdimg {max-width:20em;}
}
 
@media screen and (max-width: 15em) {
    .tdimg {max-width:10em;}
}
[CSS] pobierz, plaintext 

W twoim powyższym kodzie responsywność nie działa to się zgadza.

Ale ja nie chcę przypisywać sztywnej szerokości dla 2. kolumny, chcę żeby dopasowywała się automatycznie tak jak na tabelę przystało. Co jeśli mam płynny layout?

[HTML] pobierz, plaintext 
<style type="text/css" media="screen">
table { width:100%; }
td.tdimg img { max-width:100%; }
</style>
 
 
<table>
    <tr>
        <td class="tdimg"><img src="http://farm6.staticflickr.com/5338/8943869261_bd2e9d3d2d_o.jpg" /></td>
    </tr>
</table>
[HTML] pobierz, plaintext 

Z divami nie ma problemu:

[HTML] pobierz, plaintext 
<style type="text/css" media="screen">
.tdimg img { max-width:100%; }
</style>
 
 
<div class="tdimg"><img src="http://farm6.staticflickr.com/5338/8943869261_bd2e9d3d2d_o.jpg" /></div>
[HTML] pobierz, plaintext 

Znalazłem rozwiązanie - http://blog.room34.com/archives/5042
Tyle zachodu a wystarczyło dodać krótką linijkę kodu.

Ten post edytował AboutMe 5.06.2013, 13:16:30