Responsywny obrazek nie działa wewnątrz tabeli Opcje

[AboutMe]

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

[Talidali]

Nie zaczyna się klas od liczby.

Kod

<table class="q1col">
    <tr>
         <td>
            Text
        </td>
        <td>
            <img src="http://placehold.it/600x150" />
        </td>
    </tr>
</table>

Kod

table.q1col td{ width:100px; }
img { max-width: 100%; }

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

[rocktech.pl]

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/

[AboutMe]

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

[rocktech.pl]

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.

[AboutMe]

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