» »

Ohranjanje višine slike pri neki širini

Ohranjanje višine slike pri neki širini

iMark ::

Pozdravljeni,

na strani imam 2 stolpca. V 1. stolpcu je slika, v 2. je video. Želel bi, da je pri neki širini slike (slika je prikazana v 100% širini) vidna maksimalna možna višina slike pri tisti širini oz. 100% višina.
Sedaj je za vrstico, v kateri sta slika in video, določen min-height:300px in ko ožaš okno brskalnika, se pod sliko in videom prikaže bel rob, kar ni dobro.
Drugi problem je, da ko stran gledaš na najmanjšem pogledu (skrčeno okno do konca), se slike ne vidi več (samo div z napisom), medtem, ko pa video ostane v redu.
Primer strani je dosegljiv tu: http://creativeteam.si/sample.html.

CSS:
.photo-sample{
	background-repeat:no-repeat;
	background-position:center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	width:100%;
	height:auto;
	z-index:-1;
	position: absolute;
}

.transaprent-line{
	background: rgba(40, 40, 40, 0.5);
	height:60px;
	font-family:Arial;
	font-size:2.0em;
	padding-top:8px;
}


HTML:
    <div class="section2">
		<div class="container-fluid">
            <div class="row row-centered">
				<a href="#1">
                <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
                	<img class="photo-sample" alt="" src="resources/images/photo.jpg" id="samplePhoto">
                	<div class="transaprent-line">Title 1</div>
                    
                </div>
                </a>
                <a href="#2">
				<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
                    <video class="photo-sample" autoplay loop poster="resources/images/video_poster.jpg" id="sampleVideo">
                        <source src="resources/images/video_bg.mp4" type="video/mp4">
                    </video>
                    <div class="transaprent-line">Title 2</div>
                </div>
                </a>
            </div>
		</div>
	</div>


Kako se reši tak problem, da bosta slika in video poravnana v isti višini - brez belega roba spodaj + kako rešiti to, da se pri min širini prikaže cela slika?

Lep pozdrav

am-on ::

Evo, bolj na hitro link (v firefoxu dela, chrome noče predvajati videa). Sliko in video sem od spodaj prekril z divom, ki je zelene barve, s tem da mora pri sliki biti ta div višji od tistega kot je pri videju, višina diva pa mora obvezno biti v procentih. Na col-xs pa ta div preprosto "odstraniš" s classom hidden-xs.

iMark ::

Super, hvala :)
Problem s prekrivanjem slike, pa sem preprosto rešil tako, da sem sliko rezal in ji spremenil dimenzije enake kot video.
Sedaj izgleda tako kot mora: http://creativeteam.si/sample2.html :)


Vredno ogleda ...

TemaSporočilaOglediZadnje sporočilo
TemaSporočilaOglediZadnje sporočilo
!

Vse, kar ste si želeli vprašati o CSS, pa si niste upali. (strani: 1 2 3 423 24 25 26 )

Oddelek: Izdelava spletišč
1297330908 (55057) htmltroubles
»

Chrome - višina 100%

Oddelek: Izdelava spletišč
12812 (516) Goran's Blog
»

Slika z CSS pomoč

Oddelek: Izdelava spletišč
91950 (1781) Jerry000
»

CSS problemi (strani: 1 2 )

Oddelek: Izdelava spletišč
519329 (7128) nuuush
»

[CSS]Pozicioniranje footer diva

Oddelek: Izdelava spletišč
62289 (2236) amaze646

Več podobnih tem