Texto un proyecto que, cuando se reescala, las letras se desbordan y las imágenes se ponen donde quieren.
Arreglé lo de las letras con un <meta name="viewport" content="width=device-width, initial-scale=1">
Pero las imágenes seguían comiéndose el texto cuando redimensionas la página:
body {
color: #FF0000;
font: 14px Sans-Serif;
padding: 50px;
background: #eee;
}
h1 {
text-align: center;
padding: 20px 0 12px 0;
margin: 0;
font-weight: strong;
}
p {
text-align: center;
padding: 20px 0 12px 0;
margin: 0;
font-weight: strong;
font-size: 17px;
}
.imagenICO {
width: 200px;
height: 150px;
position: absolute;
right: 0px;
}
.logo {
width: 200px;
height: 81px;
position: absolute;
margin-top: 40px;
}
#container {
box-shadow: 0 5px 10px -5px rgba(0,0,0,0.5);
position: relative;
background: white;
}
table {
background-color: #FFFFFF;
border-collapse: collapse;
width: 100%;
margin: 15px 0;
}
th {
background-color: #FF0000 ;
color: #FFF;
cursor: pointer;
padding: 5px 10px;
}
th small {
font-size: 9px;
color: black;
}
td, th {
text-align: left;
}
a {
text-decoration: none;
color: black;
}
/*
Cambia color de letra
*/
td a {
color: black;
display: block;
padding: 10px 10px;
font-size: 16px;
}
th a {
padding-left: 0;
color: #FFE800;
}
td:first-of-type a {
background: url(./.images/file.png) no-repeat 10px 50%;
padding-left: 35px;
}
th:first-of-type {
padding-left: 35px;
}
td:not(:first-of-type) a {
background-image: none !important;
}
tr:nth-of-type(odd) {
background-color: #FFFFFF;
}
tr:hover td {
background-color:#DF2727;
}
tr:hover td a {
color: #FFF;
}
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="./.style.css">
<script src="./.sorttable.js"></script>
</head>
<body>
<div id="container">
<a title="Logytel" href="http://logytel.es"><img class="logo" src="../LGYTL_LOGO.png" alt="Logytel" /></a>
<img src="https://www.fundacion-affinity.org/sites/default/files/el-gato-necesita-tener-acceso-al-exterior.jpg" class="imagenICO">
<h1>Titulo</h1>
<p>Frase laaaaaaaaaaaaaaaaaaaarga de prueeeeeeeeeeeeeba para ver como se come la letra la imagen.</p>
<p>Frase laaaaaaaaaaaaaaaaaaaarga de prueeeeeeeeeeeeeba para ver como se come la letra la imagen.</p>
<table class="sortable">
<thead>
<tr>
<th>Nombre Fichero</th>
<th>Tipo</th>
<th>Tamaño</th>
<th>Fecha de modificación</th>
</tr>
</thead>
</table>
</div>
</body>
</html>
Quiero añadir la clase que hace que las imágenes sean responsive:
.responsive {
max-width: 100%;
height: auto;
}
Pero si añado la clase responsive a las imágenes, se les va el estilo asignado (obviamente, porque tiene el nombre de otra clase sin el estilo definido anteriormente). Por lo que hice un class="responsive logo"
para la imagen de la izquierda y un class="responsive imagenICO"
para la de la derecha, con el estilo correspondiente cada una. (Una manera que aprendí hace poco, me sirvió para las clases como material-icons
o flex-container
, no sé si la estoy usando bien con esto)
Teniendo así el css:
.responsive {
max-width: 100%;
height: auto;
}
.imagenICO {
width: 200px;
height: 150px;
position: absolute;
right: 0px;
}
.logo {
width: 200px;
height: 81px;
position: absolute;
margin-top: 40px;
}
Y así el html:
<a title="Logytel" href="http://logytel.es"><img class="responsive logo" src="../LGYTL_LOGO.png" alt="Logytel" /></a>
<img src="https://www.fundacion-affinity.org/sites/default/files/el-gato-necesita-tener-acceso-al-exterior.jpg" class="responsive imagenICO">
Pero no dio resultado. Quiero que las imágenes tengan el mismo estilo que tienen actualmente la del snippet, pero que al redimensionar, las imágenes se ajusten al contenido y no se coman las letras.
Quizá eso es lo único que me atraviesa como los mil demonios, siempre ando con problemas relacionados de este tipo.
display: flex
y unfloat
en cada imagen para colocarlas, así que no uséposition
en ningún lado en el resultado final