Zmiana rozmiaru obrazu szyn na widoku widoku?

Question

Jak zmienić rozmiar istniejącego obrazu, powiedzmy "260x180?"

Używam obecnie Carrierwave i Rmagick do przesyłania zdjęć do mojego zasobnika do przechowywania Amazon S3 i tworzy 2 wersje obrazu: oryginał i wersję kciuka (70x70).

Teraz wiem, że mogę utworzyć kolejną wersję, aby utworzyć trzy wersje, w tym 260x180, ale czułem, że to zbyt mocno zatyka bazę danych i zastanawiałem się, czy mógłbym to zrobić na zobacz poziom.

Próbowałem

<%= image_tag(@syllabus.image_url, :size => "260x180") %> 

ale wydaje się, że to nie działa - obrazy nie są identyczne rozmiary.

Co więcej, jeśli obraz jest mniejszy niż żądany wynik, czy muszę zrobić coś innego niż obrazy większe? Na przykład, czy muszę wycinać większe, ale rozszerzać mniejsze, czy będzie automatycznie skalować do pożądanego rozmiaru?

Answer 1

Jak @Yosep powiedział, nie ma nic magicznego szyn tu dzieje. <%= image_tag %> generuje znacznik <img> w html wyniku. jeśli zdać :size => '260x180' znacznik wynik <img> będzie miał swoją width i height zestaw do 260 i 180.

Nadchodzi odpowiedź na swoje pytanie. najlepszym sposobem na zapewnienie innego rozmiaru obrazu jest sposób, w jaki odrzuciłeś go na samym początku. Musisz zmienić rozmiar tych obrazów w backend i przechowywać je gdzieś.

Zmiana rozmiaru obrazu poprzez ustawienie szerokości i wysokości znacznika <img> nie spowoduje zachowania oryginalnego współczynnika kształtu obrazu. jeśli oryginalny stosunek wynosi 260: 180, to jest w porządku. Ale jeśli nie, rezultat będzie brzydki. Poza tym jest inna wada tego, z tego samego powodu, że nie powinieneś zmieniać rozmiaru obrazu za pomocą CSS również. Zmiana rozmiaru dużych obrazów na mniejsze po stronie klienta ostatecznie będzie ogromnym marnowaniem sieci, a to spowolni renderowanie witryny. To jedna z zasad YSłowa.

Aby zmienić rozmiar obrazu za pomocą CSS, można użyć max-width i max-height, większe obrazy zostaną odpowiednio przeskalowane, mniejsze nie zostaną zmienione.

Answer 2

W widoku bez przetwarzania nowego obrazu? Zgodnie z konwencją używałbyś CSS.

.image_container img { 
    width: 260px; 
    height: 180px 
} 

A oto kilka ciekawych sposobów upraw CSS: http://cssglobe.com/post/6089/3-easy-and-fast-css-techniques-for-faux-image

Answer 3

Wszystkie szyny robi, widząc swój kod, jest z kolei

<%= image_tag(@syllabus.image_url, :size => "260x180") %> 

w coś jak

<image tag="image.jpg" width="260" height="190" ../> 

na stronie (HTML).

Powiedział, że jeśli kod nie wygląda jak to działa, spróbuj przypisać klasę CSS do niego:

.image-size { 
    max-width: 300px; 
    max-height: 200px; 
} 

Answer 4

Jeśli chcesz, możesz skorzystać z automatycznej zmiany rozmiaru obrazu w chmurze.Na przykład następujące polecenie spowoduje zmianę rozmiaru obrazu w celu wypełnienia prostokąta o wymiarach 260x180.

<%= cl_image_tag("my_image.png", :size => "260x180", :crop => :fill) %> 

Ten blog post opisano sposób korzystania CarrierWave jednocześnie wszystkie obrazy są przechowywane w chmurze, dostarczane poprzez szybki CDN i wszystkie transformacje są dynamicznie wykonywane w chmurze (bez konieczności instalowania rmagick).