Skalowanie obrazu w pionie

pytanie zadane 15 marca 2016 w HTML i CSS przez Bakr Mądrala (6,850 p.)

Witam,

W jakie sposób sprawić, aby zdjęcia skalowały się w pionie? Aktualnie dzięki klasie img-responsive w Bootstrap skalują się tylko w poziomie.

Czy można nakazać elementowi div, aby nie wychodził poza granice diva, w którym się znajduje?


HTML:

<!DOCTYPE html>
<html lang="pl_PL">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="parafia, św, świętych, ">
    <meta name="author" content="bartek" >
    <link rel="shortcut icon" href="../../assets/ico/favicon.png">
    <title>Michał Wojciechowski</title>
    <link href='https://fonts.googleapis.com/css?family=Lobster&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Poiret+One&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
    <link href="css/style.css" rel="stylesheet">
    <link href="css/fontello.css" rel="stylesheet">
    <link href="css/fontello1.css" rel="stylesheet">
    <link href="css/fontello2.css" rel="stylesheet">
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
		<script src="js/html5shiv.js"></script>
		<script src="js/respond.min.js"></script>
    <![endif]-->
</head>
<body>

<div class="top">
<div class="icons">
    <div class="col-md-4 col-sm-4 col-xs-4">
      <a href="index.html"><img class="icon icons8-Back" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAACbElEQVR4Xu3d/02DQBQH8LKBI9QJdAQdxc3cREfoKDpBBUtTqpTCHzy+v0iaNOTCvbwP7+6gkDa7bFAZaKCiSTC7gICdBAEJCFgGwMJJhYyAHI/Hh3b3vmmaQ7VXQP5kvMf46EDaz2s1SkAGIAOM5373VzVKQPrMj2CcqUpRAtKmfQJjiPLYDl8dzqqbPcgMjA7grcV4X1WiP7g1CBpGZ2ILgohhC4KKYQmCjGEHgo5hBcKAYQPCgmEBwoQhD8KGIQ3CiCELwoohCcKMIQfCjiEFooAhA6KCIQGihEEPooZBDaKIQQuiikEJooxBB6KOQQXigEED4oJBAeKEAQ/ihgEN4ogBC+KKAQnijAEH4o4BBRKM0+PvEA9bB+OEAQESjAvG5iDBuMbYFCQY/zE2AwnGOMYmIMG4jVEOEoxpjFKQYNzHKAMJxjyMapDPtsOnidDK3gWfn576lmVX6n2VBOWOcRlIF0dQ7ldcKUhQAEGCAnQdMgwlwxfQrZNzKEEBurkYFMAKCQpghQTlGqV82Tu1xsicAvKbelZflwxAVUiGL8AKcUeBrBBnFGgQx9ss8CBuKBQgTig0IC4oVCAOKHQg6iiUIMootCCqKNQgiij0IGooEiBKKDIgKihSIAoociDsKJIgzCiyIKwo0iCMKPIgbCgWIEwoNiAsKFYgDCh2IOgoliDIKLYgqCjWIIgo9iAzUb7bdvv8wf3wsfiVv0+8CtFhvLQYh5VD+D18KmSQ5RGUUoyAjJzyA5R9ZWWcQ0mF3Ebp5oySYWoYQkAqJoYFfQRkQbIqmgakIssL+gjIgmRVNA1IRZYX9PED6pHGdDnmOWQAAAAASUVORK5CYII=" width="80" height="80"></a>
    </div>
    <center>
    <div class="col-md-4 col-sm-4 col-xs-4">
      <img src="nowe grafiki/p8.png" class="img-responsive img-circle">
      </div>
      </center>

    </div>
    
  </div>

<div id="content-1">
sssssssssssss
</div>

	
<footer>
&copy; Copyright by Michał Wojciechowski<br />
<p id="bk">
<img class="icon icons8-Source-Code" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAChUlEQVR4nO1ay3XCMBD0hfcsnSiBEijBF0s+UgIlpARKSAdQAh1AB1ABmw6gg+TgRPhvfXbXOey8x03eWUueYaSnLBMIBAKBQCAQCBYHVPkGrP7++z2s+lq6J1aAVR/NCQCrPpfuaRJQZGvUeladWxNg9I67hyCA1Uew6oLVBBj9bE3ARF0osjVYdQGrjxjcwYAy3zdW6glVXiTVq/KivfrqOjm2OVllvk/hDgaUq21vtYy+J9U0+tCpd5gYe++MfUK52qbw+zdaZGsw+tZya6NfqQ10a07Vg3K1fRj96kzCjcUPat03nTr9E6z13J7Q2WeaEnz/aP1gkNToU3Jdo3edv7+z53Mn7MUYJxvRPcZn13sRz5f4lSO9H1Dp3tW3ClovUeUb72c5/IBC9642Qvwl9QMq3bv6SPGXxA8ode84IuLvYB1sP6DWveMJiL+ztTD9gFL3jiMg/nrXxPADat07noD4G1g33g84dN9o1Dv+BtWN9QMu3TuuwPgbVD/GDzh077gi428QR4gfcOne8UXG32SeIS5O3TvOhPgbxOPjB9z7a87TX29f49xfc57+Bvka1/4aK/7O8oT6Gtf+GjP+jnLE+hq1H1DE3x5Hap6h9AOq+NviwMgzVH5AFX9dfaw8Q+EHHPEXNc9g+wFl/CXbx2D6AWX8RdH9aHEkP6CKv+T7GAw/oIq/bPuYVD+giL+c5xc1YYIfUMRfUt2Pkkb6AXb85T6/eBNH+AF2/F3i/KLXwJAfjI5Hjr+suh9tovEJPox+TV2RwY6/UOVFawG4r8i4Row+gVHX+ctM+PG3lqK6suh+qonZMcSnv4tek/MB1+nvvwXX6a9AIBAIBAKBQBCGH/IxS1b/gHTKAAAAAElFTkSuQmCC" width="20" height="20"> by <a id="bka" href="mailto:bartlomiej.krakowski@interia.eu">Bartłomiej Krakowski</a>
</p>
</footer>
</body>
</html>

CSS:

#tlo-glowna
{
	background-image: url(../images/2560.png);
	background-size: cover;
	background-position: right bottom;
	height: 100% !important;
	width: 100%;
	position: absolute;
	bottom: 0;
}	

footer
{
color: white;
z-index: 1000;
position: fixed;
background-color: red;
height: 43px;
width: 100%;
bottom: 0;
text-align: center;
}

#menu
{
width: 50%;
margin-right: 50%;
}

#qwe
{
width: 350px;
}

#rty
{
width: 350px;
}

#uio
{
width: 350px;
}

#asd
{
width: 350px;
}

#fgh
{
width: 350px;
}

#jkl
{
width: 350px;
}

.top
{
background-color: black;
height: 90px;
color: red;
}

.icons
{
padding-top: 5px;
padding-bottom: 5px;
}

1 odpowiedź

odpowiedź 15 marca 2016 przez arces Pasjonat (17,700 p.)
edycja 15 marca 2016 przez arces

Jeżeli korzystasz z bootstrapa ma on własny plik CSS. Jeżeli chcesz nadpisać klasę img-responsive dodaj do swojego pliku i po problemie, ale wtedy będzie Ci skalować tylko w pionie, dlatego chyba lepszym wyjściem będzie po prostu dodać własną klasę z podobną nazwą albo taką co Ci będzie odpowiadać, a kod jest prosty.

max-height: 100%;
width: auto;

To powinno wystarczyć, żeby się skalowało w pionie.

komentarz 15 marca 2016 przez Bakr Mądrala (6,850 p.)

Niestety nie działa.
Pozostały kod nie był zmieniany, została tylko dodana i podpięta klasa.

Efekt: http://s5.ifotos.pl/img/Screensho_swwpqnp.png

#tlo-glowna ma pozycje absolute, a footer- fixed.

komentarz 15 marca 2016 przez arces Pasjonat (17,700 p.)

Może po prostu obrazek masz za mały? Jeżeli jest mniejszy to wiadomo, że się sam z siebie nie rozszerzy ;)

Swoje style masz pod stylami bootstrapa? Chodzi mi w sekcji head, bo tak musi być, żeby się nadpisały.

komentarz 15 marca 2016 przez Bakr Mądrala (6,850 p.)

Obrazy mają po 250 px.

Zmieniłem kolejność w head.

http://s5.ifotos.pl/img/Screensho_swwpqnp.png

Na tym screenie jest ujęty problem.

komentarz 15 marca 2016 przez arces Pasjonat (17,700 p.)

To teraz podstawowe pytanie. Chodzi Ci o background czy o obrazki f, maila itp? Jeżeli o te drugie to pewnie masz stopkę źle ustawioną lub divy są źle dobrane.

Widzę, że przy backgroundzie masz important przy height, a przy width masz też 100%, a sprawdź z width: auto. Zresztą wrzuć to na jakiś hosting darmowy i będzie o wiele łatwiej pracować, a nie tak po screenach.