I have images placed in my website using the < img> tag. When the website is scaled to a smaller screen the images hang over the container. Why are they not scaling with the the rest of the site? Any fixes?
<div class="container">
<div class="col-md-12">
<div class="col-md-4 padtop">
<img src="img/WDadd.png" alt="" />
</div>
</div>
</div>
I dont know if this is the right way to do it, but it seems to be working for me you could try to add, give it the class thumbnail on the image, and if you dont like the look of thumbnail you can always edit it in your css file
example: http://jsfiddle.net/abnH6/6/
<div class="container">
<div class="col-md-12">
<div class="col-md-4 padtop">
<img src="http://lorempixel.com/500/500/" alt="" class="thumbnail"/>
</div>
</div>
</div>
Related
can anyone help me, why my image won't load ?
<div class="card" v-for="movie in movies_trend" v-bind:key="movie.id" >
<div :class="['card-movie', movie.page]" :movie="movie.name">
<img :src="'../src/assets/image/kimi-no-na-wa-poster.jpg'+movie.poster" class="card-img-top" :alt="movie.name">
</div>
</div>
This is my dir
<div class="card" v-for="movie in movies_trend" v-bind:key="movie.id" >
<div :class="['card-movie', movie.page]" :movie="movie.name">
<img :src="movie.poster" class="card-img-top" :alt="movie.name">
</div>
</div>
your path of an image can be added to movie.poster
so your movie.poster will contain value '../src/assets/image/kimi-no-na-wa-poster.jpg'
you can add image tag in the following way also
<img :src="'../src/assets/image/'+ ${movie.poster}" class="card-img-top" :alt="movie.name"/>
In this case, your variable movie.poster will container only the name of image kimi-no-na-wa-poster.jpg
I'm doing Spring project use Spring Boot, Spring MVC, Spring Data. Now I have a problem maybe with thymeleaf
This is my index page
Logo Bonfire and room picture is image and save in folder src/main/resource/static/images in eclipse .
When I use Search function, it will display Search page like this picture
I don't know why it's not display logo image and room image although I use one template for my index page and search page... And it's still happened with detail page too, images is not displayed. Only index page displayed images
I think the problem is not by code... I don't know why
This is my room.html (index page and search page)
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="Header :: head">
</head>
<body>
<div th:replace="Header :: header" class="header"></div>
<div class="container">
<div class="products">
<h2 class=" products-in">AVAILABLE ROOM</h2>
<div class=" top-products">
<span th:each="room,iterStat : ${room}">
<div class="col-md-3 md-col">
<div class="col-md">
<a th:href="#{/room/{id}/detail(id=${room.id})}" class="compare-in"><img th:src="#{'images/'+${room.image}}" alt="" />
</a>
<div class="top-content">
<h5><a th:href="#{/room/{id}/detail(id=${room.id})}"><tr th:text="${room.name}"></a></h5>
<div class="white">
<a th:href="#{/room/{id}/book(id=${room.id})}" class="hvr-shutter-in-vertical hvr-shutter-in-vertical2">BOOK</a>
<p class="dollar"><span class="in-dollar">$</span><span>2</span><span>0</span></p>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
</span>
<div class="clearfix"></div>
</div>
</div>
</div>
<div th:replace="Header :: footer" class="footer"></div>
</body>
</html>
Pleased help me
Use this approach to set the image :--
<div th:style="'background-image:url('+ ${room.image}+');'"></div>
Use something like this.
<img th:src="${'images/'+ room.image}" />
I'm having a problem scaling a png image with a transparent background with a width of 279 pixels and height of 432 pixels with class img-responsive on bootstrap3.
The Problem:
Whenever, I upload the png image inside the img tag with the class=
"img-fluid" it remains the same size as I scale. Other images seems to
work fine, but if I try to upload a bigger image it will become
responsive but only scale from very large to normal size, not from
normal to small.
My question is
What is the best way to optimize a PNG image for Bootstrap-3 with the class img-responsive?
HTML:
<div class="poster">
<div class="container">
<div class="intro-text">
<div class="intro-heading">Welcome <img href="../html/indexfinal.html" class="bigv" src="../images/logos/bigvlogo.png" alt=""/> <img href="../html/indexfinal.html" class="midv" src="../images/logos/midvlogo.png" alt=""/> </div>
<div class="intro-lead-in">Hi yall'</div>
<div class="container-fluid">
<img class="mascot" src="../images/mascot/wave.png">
</div>
<a style="float:left" id="guestsignup"></a>
</div>
</div>
</div>
It will work.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-6">
<img src="http://farm5.static.flickr.com/4017/4717107886_dcc1270a65_b.jpg" class="img-responsive" alt="Cinque Terre">
</div>
</div>
</div>
Resize the screen to see the difference.
You can add img-responsive class to existing code:
<img class="mascot img-responsive" src="http://farm5.static.flickr.com/4017/4717107886_dcc1270a65_b.jpg">
Hope that is what you are looking for.
So I have two image being used in two locations.
Location 1:
<div class="row">
<div class="col-md-1 col-md-offset-9">
<a>
<img alt="business card" class="img-responsive" src="/img/business_card_white.png"/>
</a>
</div>
<div class="col-md-1">
<a>
<img alt="printer" class="img-responsive" src="/img/printer_white.png"/>
</a>
</div>
</div>
Location 2
<div class="row">
<div class="col-md-7">
<form autocomplete="off">
<div class="form-group">
<input placeholder="What are you looking for?" type="text" class="form-control" id="search" data-provide="typeahead" data-source='{{keywordsList}}'/>
</div>
</form>
</div>
<div class="col-md-3">
<button type="button" class="btn btn-primary btn-block{{#if entry}} btn-lg{{/if}}" style="margin-bottom:15pt">or just show me EVERYTHING!</button>
</div>
<div class="col-md-1 center-block" style="margin-top:-9px;">
<a>
<img alt="business card" class="img-responsive" src="/img/business_card_white.png"/>
</a>
</div>
<div class="col-md-1 center-block" style="margin-top:-9px;margin-bottom:4px;">
<a>
<img alt="printer" class="img-responsive" src="/img/printer_white.png"/>
</a>
</div>
</div>
The images themselves are big and 512x512 and bootstrap decided to scale it down in location 1 to 79x79. Strangely, with the addition of an input field and a button in location 2, the images get scaled down to 59x59.
This whole scaling thing seems arbitrary to me and I'd really appreciate it if someone could explain the logic behind it to me.
The image width is dependent upon the column size. The reason for the discrepancy in image size between the two locations is because Location 2 was inside a <div class="col-md-10">.
What this did is it made the image smaller since the second location's width is 1/12 of 10/12 versus just 1/12 in location 1.
The image width depend on boostrap column size, if your image is responsive it will occupy all the column width
I have started designing a website using codeigniter tutorial from tuts plus and encountered problem on how to add carousel images using Bootstrap in codeigniter. My images are found at /images/...
How can I solve this problem?
<div class="intro-block">
<div class="container">
<div class="row">
<div class="span3">
<div class=" t">
</div>
</div>
<div class="span9">
<div id="artcoursel" class="carousel slide">
<div class="carousel-inner">
<img src= "images/test-1.png" alt="">
</div>
</div>
</div>
</div>
</div>
</div>
Try this.
<img src=<?php echo base_url('images/test-1.png')?>>